/react-scrollbars-custom

The best React custom scrollbars component

Primary LanguageJavaScriptMIT LicenseMIT

react-scrollbar-custom

DEMO · DOCUMENTATION

  • Fully customizable
  • requestAnimationFrame for 60fps
  • No extra stylesheets necessary
  • Cross-browser
  • Native scrollbars on mobile devices

IMPORTANT: default component styles uses grid layout for proper scrollbars display.
But you can change it with help of customisation.

Installation

npm i --save react-scrollbar-custom

Usage

Minimal configuration

import React, { Component }  from 'react';
import Scrollbar from 'react-scrollbar-custom';

class App extends Component
{
    render() {
        return (
                <Scrollbar style={ {width: '100%', minHeight: 300} } >
                    <p>Hello world!</p>
                </Scrollbar>
        );
    }
}

All properties and methods are in the API Documentation

Examples

Run the example, it will install dependencies, build current component version and run local web-server listening localhost:3000 (browser window will open automatically)

npm run examples

Credits

Big thanks to @malte-wessel with his react-custom-scrollbars which I used before writing this component.
So don't be wondered that repos and code look similar in some places, his package used as ethalon. And for the users convenience i've tried to make API's seamless as much as it possible.