useIntersectionObserver

Custom hook that tracks the intersection of a DOM element with its containing element or the viewport using the [`Intersection Observer API`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).

Custom hook that tracks the intersection of a DOM element with its containing element or the viewport using the Intersection Observer API.

Usage

import { useIntersectionObserver } from "@tilt-legal/cubitt-components/utilities/hooks";

// Example 1
const [ref, isIntersecting, entry] = useIntersectionObserver({ threshold: 0.5 });

API

Signature

declare function useIntersectionObserver({ threshold, root, rootMargin, freezeOnceVisible, initialIsIntersecting, onChange, }?: UseIntersectionObserverOptions): IntersectionReturn;

Parameters

ParameterTypeDescriptionDefault
optionsUseIntersectionObserverOptionsThe options for the Intersection Observer.-

Return Value

ValueTypeDescription
returnIntersectionReturnThe ref callback, a boolean indicating if the element is intersecting, and the intersection observer entry.

On this page