33 lines
615 B
JavaScript
33 lines
615 B
JavaScript
|
// useIntersectionObserver.js
|
||
|
|
import { useEffect, useState, useRef } from "react";
|
||
|
|
|
||
|
|
export function useIntersectionObserver() {
|
||
|
|
const [isIntersecting, setIsIntersecting] = useState(false);
|
||
|
|
const ref = useRef(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const observer = new IntersectionObserver(
|
||
|
|
([entry]) => {
|
||
|
|
setIsIntersecting(entry.isIntersecting);
|
||
|
|
},
|
||
|
|
{
|
||
|
|
root: null,
|
||
|
|
rootMargin: "0px",
|
||
|
|
threshold: 0.1,
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
if (ref.current) {
|
||
|
|
observer.observe(ref.current);
|
||
|
|
}
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
if (ref.current) {
|
||
|
|
observer.unobserve(ref.current);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return [ref, isIntersecting];
|
||
|
|
}
|