reactjsnotistack

how to i can add custom global close button in notistack


I want to add a custom close button in notistack for all snackbars in my project

I just find below way :

enqueueSnackbar('I use snackbars responsibly', {
            variant: 'default',
            action: (key) => (
                <Fragment>
                    <Button
                        size='small'
                        onClick={() => alert(`Clicked on action of snackbar with id: ${key}`)}
                    >
                        Detail
                    </Button>
                    <Button size='small' onClick={() => closeSnackbar(key)}>
                        Dismiss
                    </Button>
                </Fragment>
            )
        });

but this way just working for one of snackbar


Solution

  • you can try this way

    _app.js file

    import { SnackbarProvider, useSnackbar } from 'notistack';
    
    function SnackbarCloseButton({ snackbarKey }) {
      const { closeSnackbar } = useSnackbar();
    
      return (
        <IconButton onClick={() => closeSnackbar(snackbarKey)}>
          <IconClose />
        </IconButton>
      );
    }
    
    <SnackbarProvider action={snackbarKey => <SnackbarCloseButton snackbarKey={snackbarKey} />}>
      ...
    </SnackbarProvider>