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.2 kB · 34 lines
TypeScript
at main
1234567891011121314151617181920212223242526272829303132333435import { useCallback, useState } from 'react';
import useIntersectionObserver from './useIntersectionObserver.js';
import type { RefCallback } from 'react';
/** * Observes an element using IntersectionObserver and returns its latest entry. * * @template T * @param {IntersectionObserverInit} [options] IntersectionObserver options. WARNING! If you define * the object in component body, make sure to memoize it. * @returns {[React.RefCallback<T>, IntersectionObserverEntry | null]} Ref callback and the latest * IntersectionObserver entry */export default function useIntersectionObserverRef<T extends HTMLElement = HTMLElement>( options?: IntersectionObserverInit,): [RefCallback<T>, IntersectionObserverEntry | null] { const [element, setElement] = useState<T | null>(null); const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null);
const ref = useCallback<RefCallback<T>>((nextElement) => { setElement(nextElement); setEntry(null); }, []);
const observerCallback = useCallback<IntersectionObserverCallback>((entries) => { setEntry(entries[0] ?? null); }, []);
useIntersectionObserver(element, options, observerCallback);
return [ref, entry];}