react-remove-scroll
Advanced tools
The react-remove-scroll package is designed to remove scrolling from a webpage or a part of it, typically used in modals or popups to prevent background scroll. It provides a way to lock the scroll without affecting the layout with scrollbars disappearing.
Remove scroll from the entire page
This feature allows you to wrap your component with the RemoveScroll component to prevent the entire page from scrolling when the component is mounted.
{"import { RemoveScroll } from 'react-remove-scroll';\n\nconst App = () => (\n <RemoveScroll>\n <div>Your content here</div>\n </RemoveScroll>\n);"}Remove scroll from a part of the page
This feature is used to remove scrolling from a specific part of the page, such as a modal or a popup, while keeping the rest of the page scrollable.
{"import { RemoveScroll } from 'react-remove-scroll';\n\nconst Modal = () => (\n <RemoveScroll enabled={true}>\n <div>Your modal content here</div>\n </RemoveScroll>\n);"}Control scroll removal dynamically
This feature allows you to dynamically enable or disable the scroll removal by changing the 'enabled' prop on the RemoveScroll component.
{"import { RemoveScroll } from 'react-remove-scroll';\nimport { useState } from 'react';\n\nconst ToggleScroll = () => {\n const [scrollEnabled, setScrollEnabled] = useState(true);\n return (\n <div>\n <button onClick={() => setScrollEnabled(!scrollEnabled)}>Toggle Scroll</button>\n <RemoveScroll enabled={!scrollEnabled}>\n <div>Your content here</div>\n </RemoveScroll>\n </div>\n );\n};"}The body-scroll-lock package is similar to react-remove-scroll in that it prevents scrolling on the body element. It provides functions to disable and enable body scroll which can be useful for modals. It differs in its API, as it is not a React component but rather a set of utility functions.
react-scrolllock is another package that provides scroll locking capabilities. It is similar to react-remove-scroll but offers a different API. Instead of a component that wraps the content, it provides a ScrollLock component that can be placed anywhere in the component tree to prevent scrolling.
Disables scroll outside of children node.
Just wrap content, which should be scrollable, and everything else would not.
import {RemoveScroll} from 'react-remove-scroll-bar';
<RemoveScroll>
Only this content would be scrollable
</RemoveScroll>
RemoveScroll accept following props
children[enabled] - activate or deactivate component behaviour without removing it.[noIsolation] - disables outer event capturing[forwardProps] - will forward all props to the children[className] - className for an internal div[removeScrollBar] - to control scroll bar removal. Set to false, if you prefer to keep it (wheel and touch scroll still disabled).But default RemoveScroll will create a div to handle and capture events.
You may specify className for it, if you need, or remove it.
The following code samples will produce the same output
<RemoveScroll className="scroll">
Only this content would be scrollable
</RemoveScroll>
<RemoveScroll forwardProps>
<div className="scroll"> //RemoveScroll will inject props to this div
Only this content would be scrollable
</div>
</RemoveScroll>
Pick the first one if you don't need a second.
To properly size these elements please add a special className to them.
import {RemoveScroll} from 'react-remove-scroll';
// to make "width: 100%"
<div className={cx(classWithPositionFixed, RemoveScroll.classNames.fullWidth)} />
// to make "right:0"
<div className={cx(classWithPositionFixed, RemoveScroll.classNames.zeroRight)} />
See react-remove-scroll-bar documentation for details.
This library will silence any scroll(wheel, touch) event outside of whitelisted node. To be able to use more than one lock:
<RemoveScroll noIsolation />. Then remove scroll would handle only events, happened inside it.
To use this mode you have to cast some shadow behind a modal, to redirect all events to your element1.5kb after compression (excluding tslib).
This is a refactoring of another library - react-scroll-locky - to make package smaller and more react-portals friendly.
This package is relative smaller(1), more react friendly(2), works with non zero body margins(3), and has a better "overscroll" management.
MIT
FAQs
Disables scroll outside of `children` node.
We found that react-remove-scroll demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.