Smooth-scrollbar-react NPM

SMOOTH-SCROLLBAR-REACT

A wrapper for smooth-scrollbar to React Component.

Demo

https://codesandbox.io/s/smooth-scrollbar-react-4pu86

Installation

$ yarn add smooth-scrollbar smooth-scrollbar-react

Usage

import {Scrollbar} from 'smooth-scrollbar-react';

<Scrollbar
  damping={number}
  thumbMinSize={number}
  renderByPixels={boolean}
  alwaysShowTracks={boolean}
  continuousScrolling={boolean}
  wheelEventTarget={element}
  plugins={object}
  onScroll={func}>
  your contents here...
</Scrollbar>

Available Options

parameter	type	default	description
damping	`number`	`0.1`	Momentum reduction damping factor, a float value between `(0, 1)`. The lower the value is, the more smooth the scrolling will be (also the more paint frames).
thumbMinSize	`number`	`20`	Minimal size for scrollbar thumbs.
renderByPixels	`boolean`	`true`	Render every frame in integer pixel values, set to `true` to improve scrolling performance.
alwaysShowTracks	`boolean`	`false`	Keep scrollbar tracks visible.
continuousScrolling	`boolean`	`true`	Set to `true` to allow outer scrollbars continue scrolling when current scrollbar reaches edge.
plugins	`object`	`{}`	Options for plugins, see Plugin System.

Confusing with the option field? Try edit tool here!

Examples

Original code:

function App() {
  return (
    <div className='App'>
      <div className='list-data'>
        {[...Array(20).keys()].map((value, index) => (
          <div key={index}>{value + index}</div>
        ))}
      </div>
    </div>
  );
}

Option 1:

import {Scrollbar} from 'smooth-scrollbar-react';

function App() {
  return (
    <div className='App'>
      <Scrollbar
        plugins={{
          overscroll: {
            effect: 'bounce',
          },
        }}>
        <div className='list-data' style={{height: '200px'}}>
          {[...Array(20).keys()].map((value, index) => (
            <div key={index}>{value + index}</div>
          ))}
        </div>
      </Scrollbar>
    </div>
  );
}

Option 2: Recommended(Using `display: flex`)

import {Scrollbar} from 'smooth-scrollbar-react';

function App() {
  return (
    <div className='App'>
      <div className='list-data' style={{display: 'flex', maxHeight: '200px'}}>
        <Scrollbar
          plugins={{
            overscroll: {
              effect: 'glow',
            },
          }}>
          {[...Array(20).keys()].map((value, index) => (
            <div key={index}>{value + index}</div>
          ))}
        </Scrollbar>
      </div>
    </div>
  );
}