DEV Community

Cover image for React Sticky Children
Kevin Farrugia
Kevin Farrugia

Posted on

React Sticky Children

I created a simple ReactJS plugin react-sticky-children to abstract away the complexities of the IntersectionObserver API and allow you to apply styles to a component as it approaches the top of the viewport. Useful for "Scroll to Top", complex "sticky" elements or animating components into view.

Demo

Demo

Usage

import { ReactStickyChildren } from 'react-sticky-children';

<ReactStickyChildren initialStyle={initialStyle} intersectingStyle={intersectingStyle}>
  <MyComponent />
</ReactStickyChildren>
Enter fullscreen mode Exit fullscreen mode

Looking for feedback. 🙏

NPM: https://www.npmjs.com/package/react-sticky-children
GitHub: https://github.com/kevinfarrugia/react-sticky-children

Top comments (0)