JSPM

  • Created
  • Published
  • Downloads 63575
  • Score
    100M100P100Q159632F
  • License MIT

The best React custom scrollbars component

Package Exports

  • react-scrollbars-custom

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-scrollbars-custom) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-scrollbars-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 by passing gridless parameter on initialisation.

Installation

npm i --save react-scrollbars-custom

Usage

Minimal configuration

import React, { Component }  from 'react';
import Scrollbar from 'react-scrollbars-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)

# install dependencies if you haven't yet
npm install
npm run examples

Tests

# install dependencies if you haven't yet
npm install
npm run test

Coverage

# install dependencies if you haven't yet
npm install
npm run test:coverage

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.