36 lines
887 B
JavaScript
36 lines
887 B
JavaScript
import { useEffect } from "react";
|
|
|
|
export default function TimedToast({ message, durationMs, show, setShow }) {
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setShow(false);
|
|
}, durationMs);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, [durationMs]);
|
|
|
|
if (!show) return null;
|
|
|
|
return (
|
|
<div className="position-fixed bottom-0 end-0 p-3" style={{ zIndex: 11 }}>
|
|
<div
|
|
className="toast show"
|
|
role="alert"
|
|
aria-live="assertive"
|
|
aria-atomic="true"
|
|
>
|
|
<div className="toast-header">
|
|
<strong className="me-auto">Notification</strong>
|
|
<button
|
|
type="button"
|
|
className="btn-close"
|
|
onClick={() => setShow(false)}
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div className="toast-body">{message}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|