57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
createContext,
|
|
useCallback,
|
|
useContext,
|
|
useEffect,
|
|
useMemo,
|
|
useState,
|
|
} from "react";
|
|
|
|
type ToastContextValue = {
|
|
message: string | null;
|
|
showToast: (message: string) => void;
|
|
clearToast: () => void;
|
|
};
|
|
|
|
const ToastContext = createContext<ToastContextValue | null>(null);
|
|
|
|
export function ToastProvider({ children }: { children: React.ReactNode }) {
|
|
const [message, setMessage] = useState<string | null>(null);
|
|
|
|
const showToast = useCallback((next: string) => {
|
|
setMessage(next);
|
|
}, []);
|
|
|
|
const clearToast = useCallback(() => setMessage(null), []);
|
|
|
|
useEffect(() => {
|
|
if (!message) return;
|
|
const timer = window.setTimeout(() => setMessage(null), 3200);
|
|
return () => window.clearTimeout(timer);
|
|
}, [message]);
|
|
|
|
const value = useMemo(
|
|
() => ({ message, showToast, clearToast }),
|
|
[message, showToast, clearToast],
|
|
);
|
|
|
|
return (
|
|
<ToastContext.Provider value={value}>
|
|
{children}
|
|
{message ? (
|
|
<div className="toast" role="status" aria-live="polite">
|
|
{message}
|
|
</div>
|
|
) : null}
|
|
</ToastContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useToast() {
|
|
const ctx = useContext(ToastContext);
|
|
if (!ctx) throw new Error("useToast must be used within ToastProvider");
|
|
return ctx;
|
|
}
|