Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/wojtekmaj/react-hooks. A collection of React Hooks.
hooks react react-hooks
Something went wrong. Try again.
1.0 kB · 31 lines
TypeScript
at main
1234567891011121314151617181920212223242526272829303132import { useEffect } from 'react';
/** * Observes a given element using IntersectionObserver. * * @param {HTMLElement} [element] Element to attach IntersectionObserver to * @param {IntersectionObserverInit} [options] IntersectionObserver options. WARNING! If you define * the object in component body, make sure to memoize it. * @param {Function} observerCallback IntersectionObserver callback. WARNING! If you define the * function in component body, make sure to memoize it. * @returns {void} */export default function useIntersectionObserver( element: HTMLElement | null, options: IntersectionObserverInit | undefined, observerCallback: IntersectionObserverCallback,): void { useEffect(() => { if (!element || !('IntersectionObserver' in window)) { return undefined; }
const observer = new IntersectionObserver(observerCallback, options);
observer.observe(element);
return () => { observer.disconnect(); }; }, [element, options, observerCallback]);}