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 12x 12x 12x 12x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 12x 12x 12x 12x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 2x 4x 4x 12x 12x 3x 3x 12x 12x 12x 12x 12x 12x 9x 9x 9x 9x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 9x 9x 9x 12x 12x 12x 12x | 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>
);
};
|