24 lines
625 B
TypeScript
24 lines
625 B
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
|
|
export const useDetectSticky = <Target extends HTMLElement>(
|
|
observerSettings = { threshold: 1 }
|
|
) => {
|
|
const [isSticky, setIsSticky] = useState(false);
|
|
const ref = useRef<Target>(null);
|
|
|
|
useEffect(() => {
|
|
const cachedRef = ref.current;
|
|
const observer = new IntersectionObserver(([e]) => {
|
|
setIsSticky(e.intersectionRatio < 1);
|
|
}, observerSettings);
|
|
|
|
cachedRef && observer.observe(cachedRef);
|
|
|
|
return () => {
|
|
cachedRef && observer.unobserve(cachedRef);
|
|
};
|
|
}, [observerSettings]);
|
|
|
|
return { isSticky, ref, setIsSticky };
|
|
};
|