diff options
| author | Maze <167211895+mazeincoding@users.noreply.github.com> | 2026-01-31 00:20:04 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2026-01-31 00:20:04 +0100 |
| commit | 7bf0984698e43b9aa2dd879f65951318ed410390 (patch) | |
| tree | ccf2cd590a47d550152afc07129cb55c71a9ec35 /apps/web/src/hooks/use-reveal-item.ts | |
| parent | 0173db99448d1c4c6415dcf15272e17551b48b04 (diff) | |
| download | opencut-7bf0984698e43b9aa2dd879f65951318ed410390.tar.gz | |
codebase overhaul (#697)
Diffstat (limited to 'apps/web/src/hooks/use-reveal-item.ts')
| -rw-r--r-- | apps/web/src/hooks/use-reveal-item.ts | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/apps/web/src/hooks/use-reveal-item.ts b/apps/web/src/hooks/use-reveal-item.ts new file mode 100644 index 00000000..5004f60c --- /dev/null +++ b/apps/web/src/hooks/use-reveal-item.ts @@ -0,0 +1,36 @@ +import { useEffect, useState, useRef } from "react"; + +export function useRevealItem( + highlightId: string | null, + onClearHighlight: () => void, + highlightDuration = 1000, +) { + const [highlightedId, setHighlightedId] = useState<string | null>(null); + const elementRefs = useRef<Map<string, HTMLElement>>(new Map()); + + const registerElement = (id: string, element: HTMLElement | null) => { + if (element) { + elementRefs.current.set(id, element); + } else { + elementRefs.current.delete(id); + } + }; + + useEffect(() => { + if (!highlightId) return; + + setHighlightedId(highlightId); + + const target = elementRefs.current.get(highlightId); + target?.scrollIntoView({ block: "center" }); + + const timeout = setTimeout(() => { + setHighlightedId(null); + onClearHighlight(); + }, highlightDuration); + + return () => clearTimeout(timeout); + }, [highlightId, onClearHighlight, highlightDuration]); + + return { highlightedId, registerElement }; +} |
