{"id":15177,"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.","status":"active","version":"4.5.0","language":"javascript","source_language":"en","source_url":"https://github.com//RobPethick/react-custom-scrollbars-2","tags":["javascript","scroll","scroller","scrollbars","react-component","react","custom","typescript"],"install":[{"cmd":"npm install react-custom-scrollbars-2","lang":"bash","label":"npm"},{"cmd":"yarn add react-custom-scrollbars-2","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-custom-scrollbars-2","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for rendering React components.","package":"react","optional":false},{"reason":"Required peer dependency for ReactDOM operations.","package":"react-dom","optional":false}],"imports":[{"note":"The library primarily uses named exports. CommonJS `require` works but ESM `import` is the recommended modern approach and supported by TypeScript.","wrong":"const { Scrollbars } = require('react-custom-scrollbars-2');","symbol":"Scrollbars","correct":"import { Scrollbars } from 'react-custom-scrollbars-2';"},{"note":"When using TypeScript, import `ScrollbarProps` for type annotations on component props or direct manipulation.","symbol":"ScrollbarProps","correct":"import type { ScrollbarProps } from 'react-custom-scrollbars-2';"},{"note":"While the main export is named, some bundlers or older setups might interpret `import Scrollbars from 'pkg'` as a default import. Always use named `import { Scrollbars }` from the root for clarity and consistency. The default export might be from a specific path.","wrong":"import Scrollbars from 'react-custom-scrollbars-2';","symbol":"Scrollbars (as default)","correct":"import Scrollbars from 'react-custom-scrollbars-2/lib/Scrollbars';"}],"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."},"warnings":[{"fix":"Review the GitHub repository's issues and changelog for specific differences or migration notes if coming from the original `react-custom-scrollbars`.","message":"This package is a fork of the original `react-custom-scrollbars`. While it aims for bug fixes and active maintenance, be aware of the lineage when migrating from the original package, as specific behavioral changes or new bugs might exist that differ from the original's last stable release.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Explicitly define `autoHeightMin` and `autoHeightMax` props to control the scrollable area's boundaries based on your design requirements.","message":"When using `autoHeight`, ensure `autoHeightMin` and `autoHeightMax` are set appropriately to prevent layout shifts or incorrect sizing, especially if the content height can vary wildly. Default values might not always suit your specific use case.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Ensure your custom render functions correctly forward `ref` props received from `Scrollbars` to the underlying DOM elements or React components that need them.","message":"Custom rendering components (`renderView`, `renderThumbHorizontal`, etc.) must pass `ref` to their children if they internally use `ref` to manage scrollbar elements. Failure to do so can break internal calculations or event handling.","severity":"gotcha","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Change `import Scrollbars from 'react-custom-scrollbars-2';` to `import { Scrollbars } from 'react-custom-scrollbars-2';`","cause":"Incorrect import of `Scrollbars` component, often due to a default import instead of a named import.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined."},{"fix":"Ensure the component is fully mounted before attempting to access its instance methods. For functional components, use `useRef` and ensure the ref is attached to the `Scrollbars` component and has been assigned.","cause":"Often occurs when trying to access `this.refs.scrollbars.getScrollHeight()` or similar methods, indicating `this.refs` is not properly set up or the component is not yet mounted.","error":"TypeError: Cannot read properties of undefined (reading 'current')"},{"fix":"Ensure your custom render functions correctly spread `props` (e.g., `<div {...props} />`) and apply `style` when provided, as these are crucial for positioning and visibility.","cause":"Commonly, the custom `renderView`, `renderTrack`, or `renderThumb` components do not correctly apply the style and props provided to them by the `Scrollbars` component.","error":"Scrollbars are not appearing or styled correctly despite applying custom render props."}],"ecosystem":"npm"}