Registry / web-framework / react-remove-scroll

react-remove-scroll

library2.7.2jsnpmunverified

react-remove-scroll is a utility component for React applications that effectively disables scrolling outside of a specified child node. It provides robust scroll blocking for both mouse and touch devices, handles vertical and horizontal scrolling, and adeptly removes the document scrollbar while preserving layout space. Currently stable at version 2.7.2, the library maintains an active release cadence, frequently delivering bug fixes and minor features. Key differentiators include its support for nested scrollable elements, compatibility with React Portals, and a highly optimized bundle size, achieved with a significant 80% reduction in version 2.0.0. It also offers a sidecar pattern for lazy loading the scroll-blocking logic, allowing for further performance optimization.

web-framework

github ↗package ↗

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Main component for basic usage. The library primarily uses ES Modules.

import { RemoveScroll } from 'react-remove-scroll';

This specific named export is from a subpath for lazy loading patterns.

import { sidecar } from 'react-remove-scroll/sidecar';

Used in conjunction with the `sidecar` pattern to import only the UI part initially.

import { RemoveScroll } from 'react-remove-scroll/UI';

Accesses predefined class names for handling fixed elements' widths when scroll is locked.

import { RemoveScroll } from 'react-remove-scroll'; // ... later ... <div className={RemoveScroll.classNames.fullWidth} />

This example demonstrates how to use the RemoveScroll component to lock the body scroll while a modal-like element is open, allowing only the modal's content to be scrollable. A button toggles the scroll lock state.

import React, { useState } from 'react'; import { RemoveScroll } from 'react-remove-scroll'; function App() { const [isScrollLocked, setScrollLocked] = useState(false); return ( <div> <button onClick={() => setScrollLocked(!isScrollLocked)}> {isScrollLocked ? 'Unlock Scroll' : 'Lock Scroll'} </button> <p>Scrollable content outside the locked area.</p> <div style={{ height: '150vh', background: '#eee' }}> {Array(50).fill(0).map((_, i) => <p key={i}>Background content {i}</p>)} </div> {isScrollLocked && ( <div style={{ position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: '80%', height: '80%', background: 'white', border: '2px solid black', padding: '20px', zIndex: 1000, overflow: 'hidden' // Important for the modal itself }}> <RemoveScroll> <div style={{ height: '100%', overflowY: 'scroll', paddingRight: '15px' }}> <h2>Modal Content</h2> <p>This content is inside the RemoveScroll component. Only this area should be scrollable.</p> {Array(100).fill(0).map((_, i) => <p key={i}>Modal line {i}</p>)} </div> </RemoveScroll> </div> )} </div> ); } export default App;

Debug

Known footguns

breakingVersion 2.0.0 introduced a breaking change requiring React 16.8 or newer. Applications using older React versions will encounter runtime errors.

gotchaUsing the `inert` prop on `RemoveScroll` will disable events for the *entire* rest of the page via `pointer-events`, which can interfere with React portals and lead to unexpected production issues. It's intended only for very specific, rare cases.

gotchaThe `allowPinchZoom` prop is `false` by default, meaning pinch-to-zoom is prevented. Enabling it might break the 'scroll isolation' provided by the component.

gotchaFor `position: fixed` elements on the page, their width might be affected when the scrollbar is removed. To ensure they maintain `width: 100%` or correct alignment, a special class name must be applied.

gotchaThe library's internal `div` for event handling can be removed or customized. Not knowing this can lead to unnecessary wrapper divs or difficulty applying custom class names.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

0 hits · last 30 days

No traffic data recorded yet.

Resources

githubhttps://github.com/theKashey/react-remove-scroll ↗

packagehttps://www.npmjs.com/package/react-remove-scroll ↗