Skip to main content

usePreventScroll

▸ usePreventScroll(state: boolean): void

Toggles the overflow: hidden CSS declaration on the <body> DOM element. usePreventScroll(state)

Usage​

Toggling scrollability of the <body> element, based on whether a modal window is displayed:

import { usePreventScroll } from "@wethegit/react-hooks"
import { useState } from "react"

const MyComponent = () => {
  const [modalIsOpen, setModalIsOpen] = useState(false)

  usePreventScroll(modalIsOpen)

  return (
    <>
      <button onClick={() => setModalIsOpen(state => !state)}

      {modalIsOpen && (
        <div>How about this amazing modal window, eh?</div>
      )}
    </>
  )
}

Parameters​

NameTypeDescription
statebooleanWhether to prevent scrolling on the <body> element.