0.1.2 • Published 6 years ago

react-lock-bodyscroll v0.1.2

Weekly downloads
1
License
MIT
Repository
github
Last release
6 years ago

react-lock-bodyscroll

NPM version NPM yearly download

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