diff options
| author | Fuwn <[email protected]> | 2026-01-24 13:09:50 +0000 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2026-01-24 13:09:50 +0000 |
| commit | 396acf3bbbe00a192cb0ea0a9ccf91b1d8d2850b (patch) | |
| tree | b9df4ca6a70db45cfffbae6fdd7252e20fb8e93c /src/components/hooks/useSticky.ts | |
| download | umami-396acf3bbbe00a192cb0ea0a9ccf91b1d8d2850b.tar.xz umami-396acf3bbbe00a192cb0ea0a9ccf91b1d8d2850b.zip | |
Created from https://vercel.com/new
Diffstat (limited to 'src/components/hooks/useSticky.ts')
| -rw-r--r-- | src/components/hooks/useSticky.ts | 25 |
1 files changed, 25 insertions, 0 deletions
diff --git a/src/components/hooks/useSticky.ts b/src/components/hooks/useSticky.ts new file mode 100644 index 0000000..ef9fb36 --- /dev/null +++ b/src/components/hooks/useSticky.ts @@ -0,0 +1,25 @@ +import { useEffect, useRef, useState } from 'react'; + +export function useSticky({ enabled = true, threshold = 1 }) { + const [isSticky, setIsSticky] = useState(false); + const ref = useRef(null); + + useEffect(() => { + let observer: IntersectionObserver | undefined; + // eslint-disable-next-line no-undef + const handler: IntersectionObserverCallback = ([entry]) => + setIsSticky(entry.intersectionRatio < threshold); + + if (enabled && ref.current) { + observer = new IntersectionObserver(handler, { threshold: [threshold] }); + observer.observe(ref.current); + } + return () => { + if (observer) { + observer.disconnect(); + } + }; + }, [ref, enabled, threshold]); + + return { ref, isSticky }; +} |