From 298b27bf8c6b350f1b9ba150beab24598a706f52 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Wed, 11 Sep 2024 17:05:14 +0100 Subject: Add hook for visibility detection --- thallium-frontend/src/utils/hooks.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 thallium-frontend/src/utils/hooks.ts diff --git a/thallium-frontend/src/utils/hooks.ts b/thallium-frontend/src/utils/hooks.ts new file mode 100644 index 0000000..9b478f7 --- /dev/null +++ b/thallium-frontend/src/utils/hooks.ts @@ -0,0 +1,15 @@ +import { useMemo, useState, useEffect } from "react"; + +export function useVisible(ref: RefObject) { + const [isVisible, setVisible] = useState(false) + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => setVisible(entry.isIntersecting) + ) + observer.observe(ref.current) + return () => observer.disconnect() + }, []) + + return isVisible +} -- cgit v1.2.3