1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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 };
}
|
