g30elipse/react-scroll-detect

React component for listening to scroll events when a section enters the viewport.

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>