28 lines
1.0 KiB
JavaScript
28 lines
1.0 KiB
JavaScript
// src/components/Toast.jsx
|
||
import { useEffect } from "react";
|
||
|
||
/**
|
||
* Toast — всплывающее сообщение об ошибке/успехе, автоматически скрывается.
|
||
*
|
||
* @param {string} message — текст сообщения
|
||
* @param {"error"|"success"} [type="error"]
|
||
* @param {function} onDismiss — вызывается по истечении таймера или по клику на крестик
|
||
* @param {number} [duration=4000] — время жизни в мс
|
||
*/
|
||
export default function Toast({ message, type = "error", onDismiss, duration = 4000 }) {
|
||
useEffect(() => {
|
||
const timer = setTimeout(onDismiss, duration);
|
||
return () => clearTimeout(timer);
|
||
}, [onDismiss, duration]);
|
||
|
||
if (!message) return null;
|
||
|
||
return (
|
||
<div className={`f-toast f-toast-${type}`} role="alert">
|
||
<span>{message}</span>
|
||
<button type="button" className="f-toast-close" onClick={onDismiss} aria-label="Close">
|
||
×
|
||
</button>
|
||
</div>
|
||
);
|
||
} |