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