react-scroll-detect

A set of utility components to watch scroll changes.

Codesandbox demo

Install

npm install --save @chris221/react-scroll-detect

or

yarn add @chris221/react-scroll-detect

Fork

Forked from g30elipse/react-scroll-detect

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>