{"library":"react-custom-scrollbars-2","title":"React Custom Scrollbars Component (Fork)","description":"react-custom-scrollbars-2 is a community-maintained fork of the original `react-custom-scrollbars` package, providing a customizable React component for creating custom scrollbars while leveraging native browser scrolling behavior. It aims to address bug fixes and maintain active development where the original project became stale. The current stable version is 4.5.0. Key differentiators include frictionless native scrolling, mobile device native scrollbar support, extensive customization options (e.g., auto-hide, auto-height), universal rendering (SSR compatible), and performance optimizations using `requestAnimationFrame` for 60fps. It avoids extra stylesheets and ships with 100% code coverage. This package is ideal for applications requiring fine-grained control over scrollbar appearance and behavior without sacrificing performance or accessibility.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-custom-scrollbars-2"],"cli":null},"imports":["import { Scrollbars } from 'react-custom-scrollbars-2';","import type { ScrollbarProps } from 'react-custom-scrollbars-2';","import Scrollbars from 'react-custom-scrollbars-2/lib/Scrollbars';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { Component } from 'react';\nimport { Scrollbars } from 'react-custom-scrollbars-2';\n\nclass App extends Component {\n  render() {\n    return (\n      <div style={{ padding: '20px', border: '1px solid #ccc', maxWidth: '600px', margin: '50px auto' }}>\n        <h1>My Content with Custom Scrollbars</h1>\n        <Scrollbars \n          style={{ width: 500, height: 300, border: '1px solid #eee' }}\n          autoHide\n          autoHideTimeout={1000}\n          autoHideDuration={200}\n        >\n          <p>Some great content that will overflow the container. This paragraph and subsequent content are here to demonstrate the scrolling functionality. </p>\n          <p>You can customize the appearance and behavior of the scrollbars, such as making them automatically hide when not in use. This helps maintain a clean UI.</p>\n          <p>More content to fill the space and ensure scrolling is necessary. Keep adding text until the scrollbar appears, allowing you to test the component effectively.</p>\n          <p>Final paragraph for testing purposes. Enjoy your custom scrollbars!</p>\n          <p>This is even more content to make sure the scrollbar is definitely there.</p>\n          <p>And one last line.</p>\n        </Scrollbars>\n      </div>\n    );\n  }\n}\n\n// For a real app, you would render this component:\n// ReactDOM.render(<App />, document.getElementById('root'));\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates rendering a `Scrollbars` component with basic styling, auto-hide functionality, and overflowing content.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}