react-scroll-area

A scroll area wrapper to mimic Facebook Scroll Area

Demo

Installation

With npm:

$ npm i @xico2k/react-scroll-area

or with yarn:

$ yarn add @xico2k/react-scroll-area

Usage

On your component add:

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

To render:

<ScrollArea>
    Some Content
</ScrollArea>

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();