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
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>