Registry /
web-framework / react-custom-scrollbars-2
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Scrollbars
✓ import { Scrollbars } from 'react-custom-scrollbars-2';
✗ const { Scrollbars } = require('react-custom-scrollbars-2');
The library primarily uses named exports. CommonJS `require` works but ESM `import` is the recommended modern approach and supported by TypeScript.
ScrollbarProps
✓ import type { ScrollbarProps } from 'react-custom-scrollbars-2';
When using TypeScript, import `ScrollbarProps` for type annotations on component props or direct manipulation.
Scrollbars (as default)
✓ import Scrollbars from 'react-custom-scrollbars-2/lib/Scrollbars';
✗ import Scrollbars from 'react-custom-scrollbars-2';
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.
This quickstart demonstrates rendering a `Scrollbars` component with basic styling, auto-hide functionality, and overflowing content.
import React, { Component } from 'react';
import { Scrollbars } from 'react-custom-scrollbars-2';
class App extends Component {
render() {
return (
<div style={{ padding: '20px', border: '1px solid #ccc', maxWidth: '600px', margin: '50px auto' }}>
<h1>My Content with Custom Scrollbars</h1>
<Scrollbars
style={{ width: 500, height: 300, border: '1px solid #eee' }}
autoHide
autoHideTimeout={1000}
autoHideDuration={200}
>
<p>Some great content that will overflow the container. This paragraph and subsequent content are here to demonstrate the scrolling functionality. </p>
<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>
<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>
<p>Final paragraph for testing purposes. Enjoy your custom scrollbars!</p>
<p>This is even more content to make sure the scrollbar is definitely there.</p>
<p>And one last line.</p>
</Scrollbars>
</div>
);
}
}
// For a real app, you would render this component:
// ReactDOM.render(<App />, document.getElementById('root'));
export default App;
Errors
Common errors & fixes
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
Incorrect import of `Scrollbars` component, often due to a default import instead of a named import.
fixChange `import Scrollbars from 'react-custom-scrollbars-2';` to `import { Scrollbars } from 'react-custom-scrollbars-2';` TypeError: Cannot read properties of undefined (reading 'current')
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.
fixEnsure 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.
Scrollbars are not appearing or styled correctly despite applying custom render props.
Commonly, the custom `renderView`, `renderTrack`, or `renderThumb` components do not correctly apply the style and props provided to them by the `Scrollbars` component.
fixEnsure your custom render functions correctly spread `props` (e.g., `<div {...props} />`) and apply `style` when provided, as these are crucial for positioning and visibility. Audit
Dependencies
reactrequiredRequired peer dependency for rendering React components.
react-domrequiredRequired peer dependency for ReactDOM operations.