{"library":"react-remove-scroll","title":"React Remove Scroll","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-remove-scroll"],"cli":null},"imports":["import { RemoveScroll } from 'react-remove-scroll';","import { sidecar } from 'react-remove-scroll/sidecar';","import { RemoveScroll } from 'react-remove-scroll/UI';","import { RemoveScroll } from 'react-remove-scroll';\n// ... later ...\n<div className={RemoveScroll.classNames.fullWidth} />"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nfunction App() {\n  const [isScrollLocked, setScrollLocked] = useState(false);\n\n  return (\n    <div>\n      <button onClick={() => setScrollLocked(!isScrollLocked)}>\n        {isScrollLocked ? 'Unlock Scroll' : 'Lock Scroll'}\n      </button>\n      <p>Scrollable content outside the locked area.</p>\n      <div style={{ height: '150vh', background: '#eee' }}>\n        {Array(50).fill(0).map((_, i) => <p key={i}>Background content {i}</p>)}\n      </div>\n      \n      {isScrollLocked && (\n        <div style={{\n          position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',\n          width: '80%', height: '80%', background: 'white', border: '2px solid black',\n          padding: '20px', zIndex: 1000, overflow: 'hidden' // Important for the modal itself\n        }}>\n          <RemoveScroll>\n            <div style={{ height: '100%', overflowY: 'scroll', paddingRight: '15px' }}>\n              <h2>Modal Content</h2>\n              <p>This content is inside the RemoveScroll component. Only this area should be scrollable.</p>\n              {Array(100).fill(0).map((_, i) => <p key={i}>Modal line {i}</p>)}\n            </div>\n          </RemoveScroll>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default App;","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}