Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 21x 21x 21x 21x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 23x 23x 23x 23x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 2x 5x 5x 23x 23x 8x 8x 23x 23x 23x 23x 23x 23x 15x 15x 15x 15x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 15x 15x 15x 23x 23x 23x 23x | import { createContext, useContext, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { AnimatePresence } from 'motion/react';
import * as m from 'motion/react-m';
interface ToastOption {
duration?: number;
}
interface ToastContextType {
run: (toastContent: React.ReactNode, options?: ToastOption) => void;
}
const ToastContext = createContext<ToastContextType | null>(null);
export const useToast = () => {
const context = useContext(ToastContext);
if (!context) throw new Error('useToast must be used in ToastProvider');
return context;
};
interface ToastProviderProps {
children: React.ReactNode;
}
interface ToastItem {
id: string;
content: React.ReactNode;
}
export const ToastProvider = ({ children }: ToastProviderProps) => {
const [toasts, setToasts] = useState<ToastItem[]>([]);
const [mounted, setMounted] = useState(false);
const run = (toastContent: React.ReactNode, options?: ToastOption) => {
const duration = options?.duration ?? 3000;
//const toastId = Date.now().toString();
const toastId = crypto.randomUUID();
const nextToastContent: ToastItem = {
id: toastId,
content: toastContent,
};
setToasts((prev) => [...prev, nextToastContent]);
setTimeout(() => {
setToasts((prev) => prev.filter((t) => t.id !== toastId));
}, duration);
};
useEffect(() => {
// eslint-disable-next-line react-hooks/set-state-in-effect
setMounted(true);
}, []);
return (
<ToastContext.Provider value={{ run }}>
{children}
{mounted &&
createPortal(
<div>
<AnimatePresence mode='popLayout'>
{toasts.map((t, i) => {
const toastIndex = toasts.length - 1 - i;
return (
<div
key={t.id}
className='pointer-events-none fixed inset-0 z-9999 flex items-end justify-center'
>
<m.div
key={t.id}
className='mb-14 w-full max-w-110 px-4'
animate={{
opacity: toastIndex > 2 ? 0 : 1 - toastIndex * 0.01,
y: toastIndex * 10,
scale: 1 - toastIndex * 0.05,
transition: {
type: 'spring',
stiffness: 200,
damping: 19,
mass: 1,
ease: 'easeOut',
},
}}
exit={{ opacity: 0, transition: { duration: 0.2 }, scale: 0.5 }}
initial={{ opacity: 0, scale: 0.1 }}
role='status'
>
{t.content}
</m.div>
</div>
);
})}
</AnimatePresence>
</div>,
document.body,
)}
</ToastContext.Provider>
);
};
|