-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathToastContext.jsx
More file actions
48 lines (42 loc) · 1.44 KB
/
ToastContext.jsx
File metadata and controls
48 lines (42 loc) · 1.44 KB
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
import React, { createContext, useState, useCallback } from 'react';
import Toast from '../components/Toast';
export const ToastContext = createContext();
let id = 0;
export const ToastProvider = ({ children }) => {
const [toasts, setToasts] = useState([]);
const addToast = useCallback((toast) => {
const newToast = { ...toast, id: id++ };
setToasts((prevToasts) => {
if (prevToasts.length >= 5) {
const updatedToasts = prevToasts.slice(0, prevToasts.length - 1);
return [newToast, ...updatedToasts];
}
return [newToast, ...prevToasts];
});
}, []);
const removeToast = useCallback((id) => {
setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
}, []);
return (
<ToastContext.Provider value={{ addToast, removeToast }}>
{children}
<div className="fixed top-24 right-6 md:right-12 z-[100] pointer-events-none flex flex-col items-end gap-2">
<div className="pointer-events-auto flex flex-col-reverse gap-3">
{toasts.map((toast) => (
<Toast
key={toast.id}
id={toast.id}
title={toast.title}
message={toast.message}
duration={toast.duration}
type={toast.type}
icon={toast.icon}
links={toast.links}
removeToast={removeToast}
/>
))}
</div>
</div>
</ToastContext.Provider>
);
};