React scroll component

| 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

Create config object

| 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,toporbottomforverticalandleftorrightforhorizontalscroll. Add vendor prefixes if necessary. Use PascalCase for the vendor prefixed properties. | - | | scrollerClass | string | - | Use in similar way as thescrollerproperty | - | | 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 | iftrackistrue | The class that will be applied to the track element | - | | trackShift | number | iftrackistrueandonTrackClick` is not provided | The number of pixels that the container should scroll after clicking on the track | - |

Wrap content and spread the config

<Scroll {...config}> content </Scroll>

Browser support

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