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};