grsmto
SimplebarReact
- 🐦 Follow me on Twitter! or Mastodon!
- 👨💻 I'm available for hire! Reach out to me!
- 🚧 Check out my new project Scroll Snap Carousel!
Installation
- Via npm
npm install simplebar-react --save
- Via Yarn
yarn add simplebar-react
Usage
Check out the Demo project or our live Codesandbox example.
If you are using a module loader (like Webpack) you first need to load SimpleBar:
import SimpleBar from 'simplebar-react';
import 'simplebar-react/dist/simplebar.min.css';
const App = () => (
<SimpleBar style={{ maxHeight: 300 }}>// your content</SimpleBar>
);Don't forget to import both css and js in your project!
:warning: Warning!
SimpleBar is not intended to be used on the body element! I don't recommend wrapping your entire web page inside a custom scroll as it will often badly affect the user experience (slower scroll performance compared to the native body scroll, no native scroll behaviours like click on track, etc.). Do it at your own risk! SimpleBar is meant to improve the experience of internal web page scrolling; such as a chat box or a small scrolling area. Please read the caveats section first to be aware of the limitations!
Troubleshooting
If you are experiencing issues when setting up SimpleBar, it is most likely because your styles are clashing with SimpleBar ones. Make sure the element you are setting SimpleBar on does not override any SimpleBar css properties! We recommend to not style that element at all and use an inner element instead.
Sponsors
Thanks to BrowserStack for sponsoring open source projects and letting us test SimpleBar for free.
1. Documentation
Passing options
Find the list of available options on the core documentation.
<SimpleBar forceVisible="y" autoHide={false}>
// your content
</SimpleBar>Extra options
scrollableNodeProps
You can pass props to the underlying scrollable div element. This is useful for example to get a ref of it, if you want to access the scroll event or apply imperative directive (like scrolling SimpleBar to the bottom, etc.).
const scrollableNodeRef = React.createRef();
<SimpleBar scrollableNodeProps={{ ref: scrollableNodeRef }}>
// your content
</SimpleBar>;Accessing SimpleBar instance
You can pass a ref to the SimpleBar element:
const ref = useRef();
useEffect(() => {
ref.current.recalculate();
console.log(ref.current.el); // <- the root element you applied SimpleBar on
})
<SimpleBar ref={ref}>
// your content
</SimpleBar>Usage with 3rd party libraries
For advanced usage, in some cases (like using react-window) you can forward the scrollable and content elements using a render prop pattern:
<SimpleBar>
{({ scrollableNodeRef, contentNodeRef }) => {
// Now you have access to scrollable and content nodes
return <div></div>;
}}
</SimpleBar>If you define your own elements you should do:
<SimpleBar>
{({ scrollableNodeProps, contentNodeProps }) => {
return (
<div {...scrollableNodeProps}>
outer/scrollable element
<div {...contentNodeProps} />inner element</div>
</div>
);
}}
</SimpleBar>