React Library HubReact Library Hub
IN

Intersection Observer

@react-hook/intersection-observer

A React hook for the IntersectionObserver API that uses a polyfill when the native API is not available

Hooks
react
react hook
hook
react hooks
hooks
intersection
intersection observer
use intersection observer
useintersectionobserver
@react-hook/intersection-observer
Documentation GitHub npm
Stars
1.5k
Weekly
0
Open issues
38
Bundle
~60 kB

Installation

npm install @react-hook/intersection-observer

Code example

import { useIntersectionObserver } from "@react-hook/intersection-observer";

export function Example() {
  const value = useIntersectionObserver();
  return <p>{String(value)}</p>;
}

Pros & cons

Pros

  • Actively maintained by Jared Lunde
  • 0 weekly downloads. Battle tested
  • First-class TypeScript definitions
  • MIT licensed

Considerations

  • Adds roughly ~60 kB to your bundle
  • Needs client-only rendering in SSR frameworks
  • Not supported in React Native
  • 38 open issues on GitHub

FAQs

Alternatives & similar libraries