overlayscrollbars-react-better

Example   •   Documentation   •   FAQ

The official OverlayScrollbars wrapper for React.

Installation

npm install overlayscrollbars-react

Peer Dependencies

OverlayScrollbars for React has the following peer dependencies:

• The vanilla JavaScript library: overlayscrollbars

npm install overlayscrollbars

• The React framework: react

npm install react

TypeScript

• In case you are using TypeScript, you have to install the OverlayScrollbars typings:

npm install @types/overlayscrollbars

Since this wrapper is written in TypeScript it comes with its generated typings.
Check out the recommended tsconfig.json options.

Usage

CSS

You have to import the OverlayScrollbars.css by yourself.
The component doesn't do it for you as the styles are global styles!
There are different ways to achieve this, in React the most simple way for me was to add this line in the index file:

import 'overlayscrollbars/css/OverlayScrollbars.css';

Import

Simply import the component into your file(s):

import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';

Template

After the import you can use it in JSX:

<OverlayScrollbarsComponent>
  example content
</OverlayScrollbarsComponent>

Properties

Two properties are accepted: options and extensions.

• The options property accepts a object and can be changed at any point in time, and the plugin will adapt.
• The extensions property accepts a string, string array or object and is only taken into account if the component gets mounted.

<OverlayScrollbarsComponent
  options={{ scrollbars: { autoHide: 'scroll' } }} 
  extensions={['extensionA', 'extensionB']}
>
</OverlayScrollbarsComponent>

You can read more about the options object here, extensions are documented here and here.

Instance

If you get the component reference, it provides two methods: osInstance() and osTarget().

• The osInstance() method returns the OverlayScrollbars instance of the component, or null if the instance isn't initialized yet or already destroyed.
• The osTarget() method returns the native html element to which the plugin was initialized, or null if the the component isn't mounted yet or already unmounted.

Example App

In case you need a example app for reference, you can use the example app in this repo(example folder):

• Live example
• Source code

If you wanna build the example app, run these commands:

npm run setup
npm run build
npm run example

License

MIT