3.0.4 • Published 7 years ago
@opuscapita/react-perfect-scrollbar v3.0.4
React Perfect Scrollbar
Description
React wrapper for perfect-scrollbar with OpusCapita styles.
- Updated to latest
perfect-scrollbarversion. - Based on https://github.com/goldenyz/react-perfect-scrollbar
Installation
npm install @opuscapita/react-perfect-scrollbarDemo
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>
);
}
}