# @michellocana/react-scrolllock > Prevent scroll on the body when component is mounted. Latest version **1.0.1** (published 2023-11-09) · MIT license · 0 weekly downloads ## Install ```sh npm install @michellocana/react-scrolllock pnpm add @michellocana/react-scrolllock yarn add @michellocana/react-scrolllock bun add @michellocana/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 | 1.0.1 | | Published | 2023-11-09 | | First published | 2023-10-27 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 53.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Joss Mackison | | Maintainers | michellocana | | Keywords | react, scroll, scroll-lock, disable-scroll | ## Links - npm: https://www.npmjs.com/package/@michellocana/react-scrolllock - Repository: https://github.com/michellocana/react-scrolllock - Homepage: https://jossmac.github.io/react-scrolllock - Issues: https://github.com/jossmac/react-scrolllock/issues - npm.io page: https://npm.io/package/@michellocana/react-scrolllock ## Dependencies (2) - [exenv](https://npm.io/package/exenv.md) ^1.2.2 - [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.23.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 - 1.0.1 (latest) — 2023-11-09 - 1.0.0 — 2023-10-30 - 0.0.2 — 2023-10-30 - 0.0.1 — 2023-10-27 ## README # React Scroll Lock _🚨 Not Maintained_ [![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/) This project is a fork of [react-scrolllock](https://www.npmjs.com/package/react-scrolllock), which is now unmantained. This version keeps almost all of the original code, but updates the `react` and `react-dom` peer dependencies and moves from Flow to TypeScript. 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/@michellocana/react-scrolllock · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._