1.2.0 • Published 4 years ago
react-scroll-detect v1.2.0
react-scroll-detect
A set of utility components to watch scroll changes.
Components
DetectSection
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
| props | signature | required | description |
|---|---|---|---|
| - | - | - | - |
ReactScrollDetect
This is a wrapper component for your scrollable component. Wrap your component with ReactScrollDetect and attach the onChange listener.
props
| 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 |
Example
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>