React Perfect Scrollbar

Description

React wrapper for perfect-scrollbar with OpusCapita styles.

• Updated to latest perfect-scrollbar version.
• Based on https://github.com/goldenyz/react-perfect-scrollbar

Installation

npm install @opuscapita/react-perfect-scrollbar

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

• With webpack use resolve.mainFields to configure the module type.
• Add SASS loader to support importing of SASS styles.

API

| Prop name | Type | Default | Description | | ------------------ | ------------- | -------------- | ---------------------------------------- | | className | string | | Extra class names | | option | object | | PerfectScrollbar options | | containerRef | function | | Ref for the container | | onScrollY | function | | onScollY callback | | onScrollX | function | | onScollX callback | | onScrollUp | function | | onScollUp callback | | onScrollYDown | function | | onScollDown callback | | onScrollLeft | function | | onScollLeft callback | | onScrollRight | function | | onScollRight callback | | onYReachStart | function | | onYReachStart callback | | onYReachEnd | function | | onYReachEnd callback | | onXReachStart | function | | onXReachStart callback | | onXReachEnd | function | | onXReachEnd callback |

Code example

import React from 'react';
import PerfectScrollbar from '@opuscapita/react-perfect-scrollbar';

export default class ListView extends React.Component {
  render() {
    return (
      <PerfectScrollbar>
        <SomeList />
      </PerfectScrollbar>
    );
  }
}