react-lock-bodyscroll

React lock body scroll work fine on Mobile browsers

Sometimes you want to prevent your users from being able to scroll the body of your page while a particular component is absolutely positioned over your page (think modal or full-screen mobile menu).

Installation

yarn add react-lock-bodyscroll

Usage

import {LockBodyScroll, useLockBodyScroll} from 'react-lock-bodyscroll';

function Modal({title, content, onClose}) {
  return (
    <>
      <LockBodyScroll />
      <div className="modal-overlay" onClick={onClose}>
        <div className="modal">
          <h2>{title}</h2>
          <p>{content}</p>
        </div>
      </div>
    </>
  );
}

// OR
// Call hook to lock body scroll
function Modal({title, content, onClose}) {
  useLockBodyScroll();

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal">
        <h2>{title}</h2>
        <p>{content}</p>
      </div>
    </div>
  );
}

License

MIT © Nghiep