perfect-scrollbar-react

A wrapper for perfect-scrollbar to React Component.

Demo

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

Installation

To install the stable version you can use:

$ yarn add perfect-scrollbar-react

Usage (More detail examples)

• Just only add one custom css to container for keep safe your design layout

import Scrollbar from 'perfect-scrollbar-react';
import 'perfect-scrollbar-react/dist/style.min.css';

.container-data {
  display: flex;
  height: 200px; // optional or max-height: 200px;
}

• Use all Options and Events of perfect-scrollbar

...
<Scrollbar
  options={{ minScrollbarLength: 50 }}
  innerRef={node => (this.scrollbar = node)}
/>

...
componentDidMount() {
  if (this.scrollbar) {
    this.scrollbar.element.addEventListener('ps-scroll-y', () =>
      console.log('scroll-y')
    );
  }
}
...

• Switch native scrollbars for mobile devices

const isMobile = condition && condition;

<Scrollbar enable={!isMobile} />;

Examples

Original code:

...
render() {
  return
  <div className="App">
    <div className="list-data">
      {Array(20)
        .fill(1)
        .map((value, index) => <div key={index}>{value + index}</div>)}
    </div>
  </div>
}
...

Sample 1: (Add custom css to container)

import Scrollbar from 'perfect-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>
}
...

Sample 2: (Create a new container)

import Scrollbar from 'perfect-scrollbar-react';

...
render() {
  return
  <div className="App">

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

  </div>
}
...

Sample 3: (Wrong way)

import Scrollbar from 'perfect-scrollbar-react';

...
render() {
  return
  <div className="App">

    <div className="list-data">
      <Scrollbar>
        {[...Array(20)
          .keys()]
          .map((value, index) => <div key={index}>{value + index}</div>)}
      </Scrollbar>
    </div>

  </div>
}
...

License

MIT © Nghiệp