ssr

smooth-scrollbar-react

A wrapper for smooth-scrollbar to React Component.

Showing:

Popularity

Downloads/wk

332

GitHub Stars

17

Maintenance

Last Commit

1mo ago

Contributors

1

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Readme

SMOOTH-SCROLLBAR-REACT

A wrapper for smooth-scrollbar to React Component.

NPM version NPM monthly download

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

parametertypedefaultdescription
dampingnumber0.1Momentum 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).
thumbMinSizenumber20Minimal size for scrollbar thumbs.
renderByPixelsbooleantrueRender every frame in integer pixel values, set to true to improve scrolling performance.
alwaysShowTracksbooleanfalseKeep scrollbar tracks visible.
continuousScrollingbooleantrueSet to true to allow outer scrollbars continue scrolling when current scrollbar reaches edge.
pluginsobject{}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>
  );
}

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial