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