app/src/contexts/Toast.js (view raw)
1import React, { createContext, useState, useContext } from "react";
2import Snackbar from "@material-ui/core/Snackbar";
3
4const ToastContext = createContext();
5export default ToastContext;
6
7export const useToast = () => useContext(ToastContext);
8
9export const ToastProvider = ({ children }) => {
10 const [toasts, setToasts] = useState([]);
11
12 const addToast = (newToast) => setToasts([...toasts, newToast]);
13
14 const clearToasts = () => setToasts([]);
15
16 const consumeToast = () => {
17 const [, ...tsts] = toasts;
18 setToasts(tsts);
19 };
20
21 return (
22 <ToastContext.Provider value={{ toasts, addToast, clearToasts }}>
23 {children}
24 <Snackbar
25 anchorOrigin={{
26 vertical: "bottom",
27 horizontal: "right",
28 }}
29 autoHideDuration={6000}
30 open={toasts && toasts.length > 0}
31 message={toasts[0]}
32 onClose={consumeToast}
33 />
34 </ToastContext.Provider>
35 );
36};