41 lines
942 B
TypeScript
41 lines
942 B
TypeScript
import { useRef, useState, useEffect } from "react";
|
|
|
|
const useElementOnScreen = (options?: {
|
|
root: any;
|
|
rootMargin: string;
|
|
threshold: number;
|
|
}) => {
|
|
const containerRef = useRef(null);
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const defaultOptions = {
|
|
root: null,
|
|
rootMargin: "0px 0px 0px 0px",
|
|
threshold: 1,
|
|
};
|
|
const callbackFunction = (entries: IntersectionObserverEntry[]) => {
|
|
const [entry] = entries;
|
|
if (entry) {
|
|
setIsVisible(entry.isIntersecting);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const observer = new IntersectionObserver(
|
|
callbackFunction,
|
|
options ?? defaultOptions,
|
|
);
|
|
|
|
if (containerRef.current) observer.observe(containerRef.current);
|
|
return () => {
|
|
if (containerRef.current) observer.unobserve(containerRef.current);
|
|
};
|
|
}, [containerRef, options]);
|
|
|
|
return {
|
|
containerRef,
|
|
isVisible,
|
|
};
|
|
};
|
|
|
|
export default useElementOnScreen;
|