how to i can add custom global close button in notistack

Question

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

score 0 · Accepted Answer · answered Oct 15 '22 at 09:27

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>

how to i can add custom global close button in notistack

1 Answers1