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,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	-

Wrap content and spread the config

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

Browser support

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