# @opuscapita/react-perfect-scrollbar

> OpusCapita react wrapper for perfect scrollbar

Latest version **3.0.4** (published 2018-11-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @opuscapita/react-perfect-scrollbar
pnpm add @opuscapita/react-perfect-scrollbar
yarn add @opuscapita/react-perfect-scrollbar
bun add @opuscapita/react-perfect-scrollbar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.4 |
| Published | 2018-11-08 |
| First published | 2017-11-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6.10.0 |
| Dependencies | 2 |
| Unpacked size | 532 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | OpusCapita |
| Maintainers | abaliunov-sc, alexanderdanilov, alexeysergeev, amourzenkov-sc, bo-kh, dmitrydivin, dsanko, dzhitomirsky, egor.stambakio, elefantino, eriihine, gr4per, havantkim, ilkkalehtinen, janek.bug, jenni, jluukka, kirillvolkovich, kwierchris, lukaszkepa, naniantero, nczeranka, nkovalenko-sc, ocmachineuser, pdetmer, samikarj, tamkov-sc, zjuice |

## Links

- npm: https://www.npmjs.com/package/@opuscapita/react-perfect-scrollbar
- Repository: https://github.com/OpusCapita/react-perfect-scrollbar
- Homepage: https://github.com/OpusCapita/react-perfect-scrollbar#readme
- Issues: https://github.com/OpusCapita/react-perfect-scrollbar/issues
- npm.io page: https://npm.io/package/@opuscapita/react-perfect-scrollbar

## Dependencies (2)

- [perfect-scrollbar](https://npm.io/package/perfect-scrollbar.md) 1.4.0
- [classlist-polyfill](https://npm.io/package/classlist-polyfill.md) 1.2.0

## Recent versions

- 3.0.4 (latest) — 2018-11-08
- 3.0.3 — 2018-04-11
- 3.0.2 — 2018-04-11
- 3.0.1 — 2018-04-11
- 3.0.0 — 2018-02-20
- 2.0.0 — 2018-02-17
- 1.0.0 — 2018-01-17
- 0.0.5 — 2018-01-11
- 0.0.4 — 2017-11-29
- 0.0.3 — 2017-11-29
- 0.0.2 — 2017-11-23
- 0.0.1 — 2017-11-13

## README

# React Perfect Scrollbar

### Description
React wrapper for [perfect-scrollbar](https://www.npmjs.com/package/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](https://opuscapita.github.io/react-perfect-scrollbar)

### 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](https://webpack.js.org/configuration/resolve/#resolve-mainfields) to configure the module type.
* Add [SASS loader](https://github.com/webpack-contrib/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
```jsx
import React from 'react';
import PerfectScrollbar from '@opuscapita/react-perfect-scrollbar';

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

---
_Source: https://npm.io/package/@opuscapita/react-perfect-scrollbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._