A set of utility components to watch scroll changes.
Wrap your component with DetectSection to attach it to the listener. ReactScrollDetect will call onChange
event whenever the component wrapped with DetectSection enters the viewport.
| props | signature | required | description |
|---|---|---|---|
| - | - | - | - |
This is a wrapper component for your scrollable component. Wrap your component with ReactScrollDetect and attach the onChange listener.
| props | signature | required | default value | description |
|---|---|---|---|---|
| onChange | (index: number) => void | false | () => null | Function which is exectuted when a new section enters the viewport |
| triggerPoint | 'center', 'top', 'bottom | false | 'center' | Trigger point for DetectSection (default: center) |
| index | number | false | 0 | This spectifies which section(index) the needs to be scrolled to the viewport.(note: this is an experimental feature) |
| offset | number | false | 0 | The offset from the top (of the screen) for the scroll to snap |
import ReactScrollDetect, { DetectSection } from 'react-scroll-detect';<ReactScrollDetect triggerPoint='center' onChange={handleSectionChange}>
<DetectSection>
<div style={{height: 500}}/>
</DetectSection>
<DetectSection>
<div style={{height: 700}}/>
</DetectSection>
<DetectSection>
<div style={{height: 400}}/>
</DetectSection>
</ReactScrollDetect>