Wondering what’s next for npm?Check out our public roadmap! »

    perfect-scrollbar-react

    1.0.1 • Public • Published

    PERFECT-SCROLLBAR-REACT

    A wrapper for perfect-scrollbar to React Component.

    NPM version NPM monthly download

    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;
    }
    ...
    <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

    Install

    npm i perfect-scrollbar-react

    DownloadsWeekly Downloads

    467

    Version

    1.0.1

    License

    MIT

    Last publish

    Collaborators

    • avatar