React-sticky-children NPM

react-sticky-children

A React component that applies CSS styles as it approaches the top of the viewport.

Demo | Playground

Demo

Installation:

npm -i -s react-sticky-children

Usage

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

<ReactStickyChildren initialStyle={initialStyle} intersectingStyle={intersectingStyle}>
  <MyComponent />
</ReactStickyChildren>

Performance

The component aims to be lightweight and is only 1.2KB minified. Additionally, it does not incur any additional re-renders and uses CSS styles for a jank-free user experience.

Recommendations

Use a const for your styles and place it outside of the component's render method.
If you are animating your component, use CSS transitions on opacity and transform to take advantage of GPU compositing. How to create high-performance CSS animations.
Good

const initialStyle = { opacity: 0 };
const intersectingStyle = { opacity: 1 };

const MyComponent = () => (
  <ReactStickyChildren
    initialStyle={initialStyle}
    intersectingStyle={intersectingStyle}
  >
    <MyComponent />
  </ReactStickyChildren>
);

Bad

const MyComponent = () => (
  <ReactStickyChildren
    initialStyle={{ opacity: 0 }}
    intersectingStyle={{ opacity: 1 }}
  >
    <MyComponent />
  </ReactStickyChildren>
);

Options

Option	Type	Description
initialStyle	CSSProperties	Initial style to be applied on the element when it is beneath or within the viewport. (Default: `{ opacity: 0, visibility: "hidden" }`)
intersectingStyle	CSSProperties	Style to be applied on the element when it intersects with the top of the viewport. (Default: `{ opacity: 1, visibility: "visible" }`)
root	Element	The IntersectionObserver interface's read-only `root` property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the `root` is null, then the bounds of the actual document viewport are used.
top	number	Top margin from the root in px. (Default: `0`)
once	boolean	Disconnect the IntersectionObserver after one intersection. (Default: `false`)
className	string	CSS class attributed to be applied to the element.

FAQs

Does this use the IntersectionObserver API?

Yes, beneath the hood it uses the IntersectionObserver API.

Why would I use this component instead of the IntersectionObserver API?

This component aims to abstract some of the complexities with the IntersectionObserver API and provide a simple React component for toggling styles on components as they approach the top of the viewport.

Can I execute JavaScript or `useEffect` hooks when the element intersects with the top of the viewport?

No. The scope of this plugin is only to toggle styles.

Which browsers are supported?

As IntersectionObserver is available on all modern browsers, react-sticky-children should also run on all modern browsers. Support for older browsers can be achieved by using the IntersectionObserver polyfill.