48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import { useToaster } from 'react-hot-toast/headless'
|
|
|
|
export default function Toaster() {
|
|
const { toasts, handlers } = useToaster()
|
|
const { startPause, endPause, calculateOffset, updateHeight } = handlers
|
|
|
|
return (
|
|
<div
|
|
className='fixed bottom-0 right-0 p-4 w-80 h-1/2 overflow-hidden'
|
|
onMouseEnter={startPause}
|
|
onMouseLeave={endPause}
|
|
>
|
|
{toasts.slice(0, 6).map(toast => {
|
|
const offset = calculateOffset(toast, {
|
|
reverseOrder: false,
|
|
gutter: -8
|
|
})
|
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-types
|
|
const reference = (element: HTMLDivElement | null) => {
|
|
if (element && typeof toast.height !== 'number') {
|
|
const { height } = element.getBoundingClientRect()
|
|
updateHeight(toast.id, -height)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
key={toast.id}
|
|
ref={reference}
|
|
className='fixed bottom-4 right-4 p-4 bg-gray-800 rounded-lg text-white transition-all duration-300'
|
|
{...toast.ariaProps}
|
|
style={{
|
|
transform: `translateY(${offset}px) translateX(${toast.visible ? 0 : 200}%)`
|
|
}}
|
|
>
|
|
{typeof toast.message === 'function' ? (
|
|
toast.message(toast)
|
|
) : (
|
|
toast.message
|
|
)}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|