A react hook for locking scroll on mount or on toggle
npm install react-lock-scrollThis project was bootstrapped with Create React Library.
npm i react-lock-scroll
es6import lockScroll from "react-lock-scroll;"
es5const lockScroll = require("react-lock-scroll");
By default, react-lock-scroll will lock the document body when the component where it is called is mounted, and unlock the document body when that component is dismounted.
ex:
``
export default (props) => {
lockScroll();
return (
I lock the bodys scroll when mounted
lockScroll can also be passed a boolean state value, and will lock the screen on true and unlock it on false.
ex:
`
export default (props) => {
[toggle, setToggle] = useState(false);
lockScroll(toggle)
return
}
LockScroll can be passed the ref of a target div to lock scrolling on. This also supports passing of a boolean state value for a toggle, however if you simply want it to lock on mount/dismount, you can just pass it a ref to the div that has overflow: scroll set. Note that this will likely require the use of forwardRef to construct this component if the DOM node is outside of the component where lockScroll is called.
ex.
`
export default (props) => {
const ref = useRef();
const [lock, setLock] = useState(false)
lockScroll(lock, ref);
return (
)
};last argument: styles (default=false)
include a valid style object with styles you want to be applied to the locked div when it's locked. Useful for adjusting for scroll bars.
`
export default (props) => {
lockScroll({margin: "15px"});
return (
when mounted, I lock and add 15px of margin to the body
)
};