31 lines
711 B
React
31 lines
711 B
React
|
import React, { useEffect, useState } from 'react'
|
||
|
|
import './Toast.css'
|
||
|
|
|
||
|
|
function Toast({ message, onClose, duration = 3000 }) {
|
||
|
|
const [isVisible, setIsVisible] = useState(true)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const timer = setTimeout(() => {
|
||
|
|
setIsVisible(false)
|
||
|
|
setTimeout(() => {
|
||
|
|
onClose?.()
|
||
|
|
}, 300) // Ждем завершения анимации
|
||
|
|
}, duration)
|
||
|
|
|
||
|
|
return () => clearTimeout(timer)
|
||
|
|
}, [duration, onClose])
|
||
|
|
|
||
|
|
if (!isVisible) return null
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`toast ${isVisible ? 'toast-visible' : ''}`}>
|
||
|
|
<div className="toast-content">
|
||
|
|
<span className="toast-message">{message}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Toast
|
||
|
|
|