npm install react-section-scroller
yarn add section-scroller
-
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
| 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 |