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 |
|
11 | A scroll area wrapper to mimic Facebook Scroll Area
|
12 |
|
13 | [Demo](//xico2k.github.com/react-scroll-area/)
|
14 |
|
15 | ## Installation
|
16 | With [npm](https://www.npmjs.com):
|
17 | ```sh
|
18 | $ npm i xico2k-react-scroll-area
|
19 | ```
|
20 | or with [yarn](https://yarnpkg.com):
|
21 | ```sh
|
22 | $ yarn add xico2k-react-scroll-area
|
23 | ```
|
24 |
|
25 | ## Usage
|
26 |
|
27 | On your component add:
|
28 |
|
29 | ```javascript
|
30 | import ScrollArea from 'xico2k-react-scroll-area';
|
31 | ```
|
32 | To render:
|
33 |
|
34 | ```html
|
35 | <ScrollArea>
|
36 | Some Content
|
37 | </ScrollArea>
|
38 | ```
|
39 |
|
40 | ### Props
|
41 |
|
42 | All 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();
|