smooth-scrollbar-react

SMOOTH-SCROLLBAR-REACT

A wrapper for smooth-scrollbar to React Component.

Demo

http://smooth-scrollbar-react.surge.sh

Installation

To install the stable version you can use:

$ yarn add smooth-scrollbar-react

Usage

import Scrollbar from 'smooth-scrollbar-react';

<Scrollbar
    damping={number},
    thumbMinSize={number},
    syncCallbacks={boolean},
    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:

...
render() {
  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';

  ...
  render() {
    return
    <div className="App">
      <Scrollbar>
        <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';

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

License

MIT © Nghiep