Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-remove-scroll

Package Overview
Dependencies
Maintainers
1
Versions
36
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-remove-scroll

Disables scroll outside of `children` node.

  • 2.6.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created

What is react-remove-scroll?

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.

What are react-remove-scroll's main functionalities?

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};"}

Other packages similar to react-remove-scroll

Keywords

FAQs

Package last updated on 17 Dec 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc