useIntersection

Tracks the changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Uses the Intersection Observer API and returns a IntersectionObserverEntry.

API

function useIntersection<GenericElement extends HTMLElement>(ref: RefObject<GenericElement>, { root, rootMargin, threshold }: IntersectionObserverInit): IntersectionObserverEntry | null;

Usage

import { useRef } from 'react';
import { useIntersection } from '@feedzai/js-utilities/hooks';

const Demo = () => {
  const intersectionRef = React.useRef(null);
  const intersection = useIntersection(intersectionRef, {
    root: null,
    rootMargin: '0px',
    threshold: 1
  });

  return (
    <div ref={intersectionRef}>
      {intersection && intersection.intersectionRatio < 1
        ? 'Obscured'
        : 'Fully in view'}
    </div>
  );
};