intersection-observer-hooks

1.1.0 • Public • Published

import {useIntersectionObserver, addTrackedLoader} from "intersection-observer-hooks"

API:

useIntersectionObserver(callback, nodeRef, options = {})

callback: returns a bool of when isIntersecting

options: Object
options.once: observe once then unobserve options.rootMargin: the root margin for intersection observer options.rootRef: React ref

Example use:

import {useIntersectionObserver, addTrackedLoader} from "intersection-observer-hooks"
 
  useIntersectionObserver((visible) => {
    // then we are not at SSR
    ssr.current = false;
    setOffscreen(!visible);
    onVisibilitySet(visible);
  }, containerRef || ref, {
    once: true,
    rootMargin: '30%',
    rootRef,
  });
 
 
  useEffect(() => {
    if (eager) {
      return addTrackedLoader(
        () => {
          setOffscreen(false);
          onVisibilitySet(true);
        },
        containerRef || ref,
      );
    }
 
    return () => null;
  }, [eager]);

Dependents (0)

Package Sidebar

Install

npm i intersection-observer-hooks

Weekly Downloads

1

Version

1.1.0

License

ISC

Unpacked Size

7.59 kB

Total Files

5

Last publish

Collaborators

  • zackljackson