React scroll component

!npm
!NPM
!npm
!Libraries.io dependency status for GitHub repo

| Statements | Branches | Functions | Lines |
| --------------------------------------------------------------------- | ------------------------------------------------------------------- | ----------------------------------------------------------------- | ---------------------------------------------------------------- |
| !Statements | !Branches | !Functions | !Lines |

React version

>= React 16.3

Install

``
yarn add react-scroll-component
`

`
npm install react-scroll-component
`

Import

`
import Scroll from 'react-scroll-component';
`

`
import {Scroll} from 'react-scroll-component';
`

Use

$3

| Property | Type | Required | Usage | Default |
| ------------------------- | :------: | :-----------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -----------: |
| className | string | - | Class is added to the wrapper element | - |
| containerClass | string | - | Add class to the inner container that will wrap your content. Be careful when adding css properties. You might break the scroller here. | - |
| containerRef | function | - | Use it to get a reference to the scrolling container. You can set scrollTop for vertical or scrollLeft for horizontal from the parent component. Don't forget to clear this reference. | - |
| dimensionChangeTimeout | number | - | Call the handler for dimension change (height, width, maxHeight, maxWidth) with a timeout in milliseconds | - |
| direction | string | true | Choose between vertical or horizontal scroll. | - |
| display | string | - | - | inline-block |
| height or width | string | true | Set height for vertical scroll. Set width for horizontal scroll. | - |
| maxHeight or maxWidth | string | - | Set maxHeight for vertical scroll. Set maxWidth for horizontal scroll. | none |
| initTimeout | number | - | In milliseconds. Needed to ensure correct rendering of the scroller in some browsers and/or devices. | 200 |
| minScrollerSize | number | - | Set a minimum scroller height in pixels for vertical scroll or width in pixels for horizontal scroll. If a value higher than the corresponding container's size (the scrolling 'window' offsetHeight for vertical or offsetWidth for horizontal) is set the value will be limited to this container's size. | 0 |
| noInitTimeout | boolean | - | Switch to true to switch off the initial timeout and render the scroller right away in componentDidMount. | false |
| observe | boolean | - | Resize scroller on child and subtree changes using the MutationObserver API. | true |
| observerTimeout | number | - | Call the mutation observer callback with timeout in milliseconds. | - |
| onScrollerToggle | function | - | Callback that will be called after scroller appears or disappears. An object with a boolean property isDisplayed will be provided as an argument to the callback. | - |
| onTrackClick | function | - | Called when the track is clicked. An object with the following properties is provided as argument: container and track are references to the DOM elements, direction (-1 for up and 1 for down), and event. If this prop is provided it prevents the default shifting | - |
| resizeDebounce | number | - | In milliseconds. This is used to optimize the calls to the resize event handler. | 400 |
| scroller | object | - | This object is used as a style property on the scroller element. Set the left' orrightproperty for averticalscroll to position the scroller to the left or to the right. Usetoporbottomto position the scroller in ahorizontalscroll case. Setwidthto define the scroller's width. Set any other validCSSproperty to style the scroller as long as you don't overrideposition,toporbottomforverticalandleftorrightforhorizontal scroll. Add vendor prefixes if necessary. Use PascalCase for the vendor prefixed properties. | - |
| scrollerClass | string | - | Use in similar way as the scroller property | - |
| scrollSizeDebounce | number | - | If provided the scroller size will be calculated with timeout equal to the value (in milliseconds). Can be useful when the main dimension is dynamically changed with transition. Then this will recalculate the scroller size and display after transition is done. | - |
| track | boolean | - | States if the track should be rendered. Defaults to false | false |
| trackClass | string | if track is true | The class that will be applied to the track element | - |
| trackShift | number | if track is true and onTrackClick is not provided | The number of pixels that the container should scroll after clicking on the track | - |

$3

``
content
``

Browser support

- Chrome, Edge, Firefox, IE11, Safari on desktop and mobile.