react-scroll-detect

A set of utility components to watch scroll changes.

Codesandbox demo

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>