# react-scrolllock > Prevent scroll on the body when component is mounted. Latest version **5.0.1** (published 2020-02-19) · MIT license · 0 weekly downloads ## Install ```sh npm install react-scrolllock pnpm add react-scrolllock yarn add react-scrolllock bun add react-scrolllock ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 5.0.1 | | Published | 2020-02-19 | | First published | 2016-11-04 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 25.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 467 | | Author | Joss Mackison | | Maintainers | jedwatson, jossmac, neptunian | | Keywords | react, scroll, scroll-lock, disable-scroll | ## Links - npm: https://www.npmjs.com/package/react-scrolllock - Repository: https://github.com/jossmac/react-scrolllock - Homepage: https://jossmac.github.io/react-scrolllock - Issues: https://github.com/jossmac/react-scrolllock/issues - npm.io page: https://npm.io/package/react-scrolllock ## Dependencies (1) - [exenv](https://npm.io/package/exenv.md) ^1.2.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 5.0.1 (latest) — 2020-02-19 - 5.0.0 — 2019-11-24 - 4.0.1 — 2019-01-23 - 4.0.0 — 2019-01-23 - 3.0.2 — 2018-08-30 - 3.0.1 — 2018-06-07 - 3.0.0 — 2018-06-06 - 2.0.7 — 2018-04-28 - 2.0.6 — 2018-04-28 - 2.0.5 — 2018-04-27 - 2.0.4 — 2018-04-27 - 2.0.3 — 2018-04-27 - 2.0.2 — 2018-04-05 - 2.0.1 — 2017-12-28 - 2.0.0 — 2017-12-16 - … 10 more at https://npm.io/package/react-scrolllock/versions ## README # 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. | --- _Source: https://npm.io/package/react-scrolllock · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._