https://github.com/xico2k/react-scroll-area

Custom scroll to overflow: scroll areas
https://github.com/xico2k/react-scroll-area

javascript react scroll

Last synced: 3 months ago
JSON representation

Custom scroll to overflow: scroll areas

• Host: GitHub
• URL: https://github.com/xico2k/react-scroll-area
• Owner: xiCO2k
• License: mit
• Created: 2017-09-08T23:40:17.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-03-03T04:01:55.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T11:09:48.853Z (3 months ago)
• Topics: javascript, react, scroll
• Language: JavaScript
• Homepage: https://xico2k.github.io/react-scroll-area/
• Size: 5.31 MB
• Stars: 9
• Watchers: 3
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![Build Status](https://travis-ci.org/xiCO2k/react-scroll-area.svg?branch=master)](https://travis-ci.org/xiCO2k/react-scroll-area)

[![npm downloads](https://img.shields.io/npm/dt/@xico2k/react-scroll-area.svg)](https://npmcharts.com/compare/@xico2k/react-scroll-area?minimal=true)

# react-scroll-area [![Demo](https://img.shields.io/badge/demo-live-brightgreen.svg)](//xico2k.github.com/react-scroll-area/)

[![NPM](https://nodei.co/npm/@xico2k/react-scroll-area.png?downloads=true&downloadRank=true)](https://npmjs.org/package/@xico2k/react-scroll-area)

A scroll area wrapper to mimic Facebook Scroll Area

[Demo](//xico2k.github.io/react-scroll-area/)

## Installation

With [npm](https://www.npmjs.com):

```sh

$ npm i @xico2k/react-scroll-area

```

or with [yarn](https://yarnpkg.com):

```sh

$ yarn add @xico2k/react-scroll-area

```

## Usage

On your component add:

```javascript

import ScrollArea from '@xico2k/react-scroll-area';

```

To render:

```html

    Some Content

```

### Props

All props are optional.

| Name | Type | Default | Description |

|:----:|:----:|:-------:|:------------|

**`width`**             | `string / number` |       | Ex: 100% / 100px / 100 |

**`height`**            | `string / number` |       | Ex: 100% / 100px / 100 |

**`trackHidden`**       | `bool`            | false |                        |

**`trackHideTime`**     | `int`             | 1000  | Milliseconds           |

**`minHandlerHeight`**  | `int`             | 70    | Pixels                 |

**`trackMargin`**       | `int`             | 4     | Pixels                 |

**`onScroll`**          | `func`            |       | callback with *`{ scrollTop: 50, innerHeight: 100, outerHeight: 50, complete: 0.5 }`*|

**`className`**         | `string`          |       | class added to the outer container |

**`innerClassName`**    | `string`          |       | class added to the inner container |

**`overflowClassName`** | `string`          |       | class added to the overflow container |

**`trackClassName`**    | `string`          |       | class added to the track container |

**`handlerClassName`**  | `string`          |       | class added to the handler container |

### Methods

* goToBottom(duration = 400);

* goToTop(duration = 400);

* goToPos(pos = 50, duration = 400);

* triggerScroll();