Menu

gitpiper

useBodyScrollLock react Code Snippet in 2022

hookseffectintermediate

Last Updated: 26 November 2022

Enables body scroll locking.

  • Use the useLayoutEffect() with an empty array as the second argument to execute the provided callback only once when the component is mounted.
  • Use Window.getComputedStyle() to get the overflow value of the body element and store it in a variable.
  • Replace the overflow value of the body element with 'hidden' and restore it to its original value when unmounting.
const useBodyScrollLock = () => { React.useLayoutEffect(() => { const originalStyle = window.getComputedStyle(document.body).overflow; document.body.style.overflow = 'hidden'; return () => (document.body.style.overflow = originalStyle); }, []); };
const Modal = ({ onClose }) => { useBodyScrollLock(); return ( <div style={{ zIndex: 100, background: 'rgba(0,0,0,0.25)', display: 'flex', justifyContent: 'center', alignItems: 'center' }} > <p style={{ padding: 8, borderRadius: 8, background: '#fff' }} onClick={onClose} > Scroll locked! <br /> Click me to unlock </p> </div> ); }; const MyApp = () => { const [modalOpen, setModalOpen] = React.useState(false); return ( <div style={{ height: '400vh', textAlign: 'center', paddingTop: 100, background: 'linear-gradient(to bottom, #1fa2ff, #12d8fa, #a6ffcb)' }} > <button onClick={() => setModalOpen(true)}>Open modal</button> {modalOpen && <Modal onClose={() => setModalOpen(false)} />} </div> ); }; ReactDOM.render(<MyApp />, document.getElementById('root'));

react snippet similar to useBodyScrollLock For You in November 2022

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2022 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️