UNPKG

2.86 kBMarkdownView Raw
1[![Build Status](https://travis-ci.org/xiCO2k/react-scroll-area.svg?branch=master)](https://travis-ci.org/xiCO2k/react-scroll-area)
2[![npm downloads](https://img.shields.io/npm/dt/xico2k-react-scroll-area.svg)](https://npmcharts.com/compare/xico2k-react-scroll-area?minimal=true)
3[![bitHound Code](https://www.bithound.io/github/xiCO2k/react-scroll-area/badges/code.svg)](https://www.bithound.io/github/xiCO2k/react-scroll-area)
4[![bitHound Dependencies](https://www.bithound.io/github/xiCO2k/react-scroll-area/badges/dependencies.svg)](https://www.bithound.io/github/xiCO2k/react-scroll-area/master/dependencies/npm)
5[![bitHound Dev Dependencies](https://www.bithound.io/github/xiCO2k/react-scroll-area/badges/devDependencies.svg)](https://www.bithound.io/github/xiCO2k/react-scroll-area/master/dependencies/npm)
6
7# react-scroll-area [![Demo](https://img.shields.io/badge/demo-live-brightgreen.svg)](//xico2k.github.com/react-scroll-area/)
8
9[![NPM](https://nodei.co/npm/xico2k-react-scroll-area.png?downloads=true&downloadRank=true)](https://npmjs.org/package/xico2k-react-scroll-area)
10
11A scroll area wrapper to mimic Facebook Scroll Area
12
13[Demo](//xico2k.github.com/react-scroll-area/)
14
15## Installation
16With [npm](https://www.npmjs.com):
17```sh
18$ npm i xico2k-react-scroll-area
19```
20or with [yarn](https://yarnpkg.com):
21```sh
22$ yarn add xico2k-react-scroll-area
23```
24
25## Usage
26
27On your component add:
28
29```javascript
30import ScrollArea from 'xico2k-react-scroll-area';
31```
32To render:
33
34```html
35<ScrollArea>
36 Some Content
37</ScrollArea>
38```
39
40### Props
41
42All props are optional.
43
44| Name | Type | Default | Description |
45|:----:|:----:|:-------:|:------------|
46**`width`** | `string / number` | | Ex: 100% / 100px / 100 |
47**`height`** | `string / number` | | Ex: 100% / 100px / 100 |
48**`trackHidden`** | `bool` | false | |
49**`trackHideTime`** | `int` | 1000 | Milliseconds |
50**`minHandlerHeight`** | `int` | 70 | Pixels |
51**`trackMargin`** | `int` | 4 | Pixels |
52**`onScroll`** | `func` | | callback with *`{ scrollTop: 50, innerHeight: 100, outerHeight: 50, complete: 0.5 }`*|
53**`className`** | `string` | | class added to the outer container |
54**`innerClassName`** | `string` | | class added to the inner container |
55**`overflowClassName`** | `string` | | class added to the overflow container |
56**`trackClassName`** | `string` | | class added to the track container |
57**`handlerClassName`** | `string` | | class added to the handler container |
58
59### Methods
60
61* goToBottom(duration = 400);
62* goToTop(duration = 400);
63* goToPos(pos = 50, duration = 400);
64* triggerScroll();