Skip to content

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

Notifications You must be signed in to change notification settings

g30elipse/react-scroll-detect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Version Build Dependencies Bundle size License

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>

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published