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: 'left',
28        }}
29        autoHideDuration={6000}
30        open={toasts && toasts.length > 0}
31        message={toasts[0]}
32        onClose={consumeToast}
33      />
34    </ToastContext.Provider>
35  );
36};