21 lines
496 B
TypeScript
21 lines
496 B
TypeScript
|
import { RefObject, useEffect, useMemo, useState } from "react";
|
||
|
|
|
||
|
|
export default function useOnScreen(ref: RefObject<HTMLElement>) {
|
||
|
|
const [isIntersecting, setIntersecting] = useState(false);
|
||
|
|
|
||
|
|
const observer = useMemo(
|
||
|
|
() =>
|
||
|
|
new IntersectionObserver(([entry]) =>
|
||
|
|
setIntersecting(entry.isIntersecting)
|
||
|
|
),
|
||
|
|
[ref]
|
||
|
|
);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
observer.observe(ref.current as HTMLElement);
|
||
|
|
return () => observer.disconnect();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return isIntersecting;
|
||
|
|
}
|