Tracks the portion of an element that intersects with the visible area of the screen (the viewport).

Usage

const el_intersection: false | IntersectionObserverEntry = useIntersection(ref: React.RefObject, options?: IObserverOptions);

Relevant Interfaces

interface IntersectionObserverEntry {
  //properties of the tracked reference element
  boundingClientRect: DOMRectReadOnly;
  //visible amount of the tracked reference element
  intersectionRatio: number;
  //properties of only the visible portion of the tracked reference element (a subset of boundingClientRect)
  intersectionRect: DOMRectReadOnly;
  isIntersecting: boolean;
  rootBounds: DOMRectReadOnly | null;
  target: Element;
  time: number;
}

interface IObserverOptions {
  //number of times the hook updates as the tracked element enters the visible screen. Defaults to 1.
  steps?: number;
  //decimal values indicating the intersection percentage at which the hook updates.
  threshold?: number[];
}

It is not possible to define both a step and a threshold. Define one at most.

Example

Display the percentage of a widget that intersects with the viewport. Update this value 10 times over the course of the widget’s entrance into the viewport.

import { useRef } from 'react';
import { useIntersection } from 'vev';

export default function() {
  const widgetReference = useRef(null);
  const intersection = useIntersection(widgetReference, {steps: 10});

  return (
    <div className="fill" ref={widgetReference}>
      <h1>{ (intersection.intersectionRatio)*100 }</h1>
    </div>
  );
}