ScrollTrackingGroup

Introduction

This is a React Component that tracks the currently scrolled to section out of a group of sections, useful for things like Single Page Applications.

To install:

npm i @deathright/react-scrolltrackinggroup

Composition

There are 3 components that make up the ScrollTrackingGroup:

• Container
  • This houses all other components
• Window
  • The window is used to capture the currently scrolled to section by triggering onScrolledToChange
  • Only a Section that overlaps with the Window can trigger the onScrolledToChange event
  • There can only be one Window in a Container
• Section
  • Sections are pieces of content, and there can be any number of them

Example:

<ScrollTrackingGroup.Container>
  <ScrollTrackingGroup.Window />
  <ScrollTrackingGroup.Section id="s1">
    {...content}
  </ScrollTrackingGroup.Section>
  <ScrollTrackingGroup.Section id="s2">
    {...content}
  </ScrollTrackingGroup.Section>
</ScrollTrackingGroup.Container>

Documentation

For in-depth documentation please see the Storybook over at the GitHub Page.

I also try to keep plenty of documentation directly in the source code, which can be found here.