React Section Scroller

A component for creating a smooth scrolling sectioned layout

Installation

npm install react-section-scroller

or

yarn add section-scroller

Usage Demo

Pros

• Touch Support
  The component supports touch swipes for navigation on touch devices. You can adjust the touch sensitivity using the touchThreshold prop.


• Keyboard navigation
  You can configure keyboard navigation using the navigationKeys prop. It expects an object with two properties:
  • increaseKeys: An array of strings or a single string representing the keys that will navigate to the next slide.
  • decreaseKeys: An array of strings or a single string representing the keys that will navigate to the previous slide.


• Very simple code without dependencies
Perfectly fit in any project size that uses React

Possible Props

Props	Type	Description	Default
children	ReactElement[]	An array of React elements representing the slides to be scrolled.	-
direction	"vertical" | "horizontal"	The scrolling direction.	"vertical"
touchThreshold	number	The minimum touch movement distance required to trigger a slide change on touch devices.	50
activeIndex	number	If defined, update slider active index, needed for outside setter, like buttons	-
initialSlideIndex	number	The index of the slide to be displayed initially.	0
slidesOffset	number number[] string string[] number|string[]	number|string or array of numbers|strings specifying an offset to be applied to each slide"s position. If number - pixel offset, if string with percentage, like 30% - offset calculates by size of slider, if string with vw|vh - it works like in css.	0
navigationKeys	{increaseKeys:string | string[], decreaseKeys:string | string[]}	The one or multiple keys that will navigate to the next/prev slide	-
getRealtimeScrollPos	(number, direction)=>unknown	A function to be called when scroll with realtime scroll offset pos. Use it only for light weigh realtime calculation, like animation.	-
getPostScrollPos	(number, direction)=>unknown	A function to be called when scroll ends with the currently scroll offset pos and direction	-
getActiveSlide	(HTMLDivElement, number)=>unknown	A function to be called with the currently active slide element and its index.	-
onScrollError	(HTMLDivElement) => unknown	A function to be called in case of a scrolling error.	-
scrollErrorDelay	number	The delay in milliseconds before triggering the onScrollError callback.	1500

And all default div props will work too.

MIT Licence