# React Scroll Lock Prevent scroll on the `` when a component is mounted. ## Install ```bash yarn add react-scrolllock ``` ## Usage ```js import ScrollLock, { TouchScrollable } from 'react-scrolllock'; class Modal extends Component { state = { lockScroll: false } render() { return (

... // the lock accepts a single child element, which supports touch-scrolling. ... // if your app structure doesn't allow wrapping like above, the `TouchScrollable` // component is exposed as a named export. ... // you can also toggle the lock based on some state.

); } } ``` ## Props #### ScrollLock | Property | Description | | :----------------------------- | :----------------------------------------------------------------------------- | | accountForScrollbars `boolean` | Default: `true` -- Whether or not to replace the scrollbar width when active. | | isActive `boolean` | Default: `true` -- Whether or not the lock is active. | | children `element` | Default: `null` -- This element is wrapped internally by the TouchScrollable component. | #### TouchScrollable Wrap an element in the `TouchScrollable` component if you need an area that supports scroll on mobile. This is necessary because the `touchmove` event is explicitly cancelled — iOS doesn't observe `overflow: hidden;` when applied to the `` element 😢 | Property | Description | | :----------------------- | :--------------------------------------------- | | children `element` | `ref => element` | **Required** The element that can be scrolled. |

Package	Téléchargements	Stars	Taille	Issues	Publication	Licence

react-scrolllock	125,391	454	-	37	il y a 5 ans	MIT