29 lines
742 B
TypeScript
29 lines
742 B
TypeScript
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 };
|
|
}
|