How to implement material-ui Snackbar as a global function?

Question

I am creating my react app with material-ui Snackbar. In my project I have a lot of components and don't want to insert <Snackbar/> in each of them. Is there a way to create function that will show snackbar, then just import and use this function in each component?

Something like:

import showSnackbar from 'SnackbarUtils';

showSnackbar('Success message');

Answer 1

You have to do it in react way. You can achieve this by creating a Higher Order Component.

1. Create a HOC that returns a snackbar component along with the wrappedComponent
2. Create a function in that HOC which accepts message, severity (if you are using Alert like me), duration and sets the appropriate states which are set to the props of the snackbar. And pass that function as a prop to the wrappedComponent.
3. Finally import this HOC wherever you want to display a snackbar, pass your component in it and call the HOC function from the prop (this.prop.functionName('Hello there!')) in the event handler where you want to display a snackbar and pass in a message.

Check this out. https://stackblitz.com/edit/snackbar-hoc?file=src/SnackbarHOC.js

Answer 2

extend it as a Hook, and then you can call it once and use state with effects to show:

import { useSnackbar } from 'notistack';
import IconButton from "@mui/material/IconButton";
import CloseIcon from "@mui/material/SvgIcon/SvgIcon";
import React, {Fragment, useEffect, useState} from "react";


const useNotification = () => {
    const [conf, setConf] = useState({});
    const { enqueueSnackbar, closeSnackbar } = useSnackbar();
    const action = key => (
        <Fragment>
            <IconButton onClick={() => { closeSnackbar(key) }}>
                <CloseIcon />
            </IconButton>
        </Fragment>
    );
    useEffect(()=>{
        if(conf?.msg){
            let variant = 'info';
            if(conf.variant){
                variant = conf.variant;
            }
            enqueueSnackbar(conf.msg, {
                variant: variant,
                autoHideDuration: 5000,
                action
            });
        }
    },[conf]);
    return [conf, setConf];
};

export default useNotification;

Then you can use it:

const [msg, sendNotification] = useNotification();

sendNotification({msg: 'yourmessage', variant: 'error/info.....'})