@deathright/react-scrolltrackinggroup
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

ScrollTrackingGroup

ScrollTrackingGroupExample

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.

Package Sidebar

Install

npm i @deathright/react-scrolltrackinggroup

Weekly Downloads

0

Version

1.1.1

License

MIT

Unpacked Size

173 kB

Total Files

40

Last publish

Collaborators

  • deathright