legacy/use-reveal-item.ts


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

import { useEffect, useState } from "react";

export function useRevealItem(
	highlightId: string | null,
	onClearHighlight: () => void,
	getElement: (id: string) => HTMLElement | null,
	highlightDuration = 1000,
) {
	const [highlightedId, setHighlightedId] = useState<string | null>(null);

	useEffect(() => {
		if (!highlightId) return;

		setHighlightedId(highlightId);

		const target = getElement(highlightId);
		target?.scrollIntoView({ block: "center" });

		const timeout = setTimeout(() => {
			setHighlightedId(null);
			onClearHighlight();
		}, highlightDuration);

		return () => clearTimeout(timeout);
	}, [highlightId, onClearHighlight, highlightDuration, getElement]);

	return { highlightedId };
}