This package has been deprecated

    Author message:

    Use body-scroll-lock instead

    react-lock-bodyscroll

    0.1.2 • Public • Published

    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

    Keywords

    Install

    npm i react-lock-bodyscroll

    DownloadsWeekly Downloads

    0

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    8.75 kB

    Total Files

    5

    Last publish

    Collaborators

    • tronghiep92