2026-02-09 21:04:34 -05:00
|
|
|
/**
|
|
|
|
|
* @license
|
|
|
|
|
* Copyright 2026 Google LLC
|
|
|
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
import { useState, useCallback, useRef, useEffect } from 'react';
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* A hook to manage a state value that automatically resets to null after a duration.
|
|
|
|
|
* Useful for transient UI messages, hints, or warnings.
|
|
|
|
|
*/
|
|
|
|
|
export function useTimedMessage<T>(durationMs: number) {
|
|
|
|
|
const [message, setMessage] = useState<T | null>(null);
|
|
|
|
|
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
|
|
|
|
|
|
|
|
|
|
const showMessage = useCallback(
|
2026-02-27 07:07:14 -08:00
|
|
|
(msg: T | null) => {
|
2026-02-09 21:04:34 -05:00
|
|
|
setMessage(msg);
|
|
|
|
|
if (timeoutRef.current) {
|
|
|
|
|
clearTimeout(timeoutRef.current);
|
|
|
|
|
}
|
2026-02-27 07:07:14 -08:00
|
|
|
if (msg !== null) {
|
|
|
|
|
timeoutRef.current = setTimeout(() => {
|
|
|
|
|
setMessage(null);
|
|
|
|
|
}, durationMs);
|
|
|
|
|
}
|
2026-02-09 21:04:34 -05:00
|
|
|
},
|
|
|
|
|
[durationMs],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
useEffect(
|
|
|
|
|
() => () => {
|
|
|
|
|
if (timeoutRef.current) {
|
|
|
|
|
clearTimeout(timeoutRef.current);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
[],
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return [message, showMessage] as const;
|
|
|
|
|
}
|