notistack

Define maximum number of snackbars that can be stacked on top of each other.

<SnackbarProvider maxSnack="3">
    <App />
</SnackbarProvider>
see the code on desktop.

You can enqueue different variants of a snackbar. Default variant is default which is a bare skeleton and you can customize it from scratch.

You can also override the styles applied to variants success, error,warning and info. See custom variants to find out how you can customize differnet variants.

const message = 'Your notification here';

handleClick = () => {
    this.props.enqueueSnackbar(message, { 
        variant: 'default',
    });
}

// OR
handleClick = () => {
    this.props.enqueueSnackbar(message);
}
see the code on desktop.

Notistack doesn't limit you. You can pass any material-ui snackbar props to either SnackbarProvider component or enqueueSnackbar prop.

Vertical
Horizontal
<SnackbarProvider
    anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'left',
    }}
>
    <App />
</SnackbarProvider>


const message = 'Your notification here';
this.props.enqueueSnackbar(message, {
    anchorOrigin: {
        vertical: 'bottom',
        horizontal: 'left',
    },
});
see the code on desktop.

You can use an icon of your choice for variants instead of using the default material icons, or you can hide them altogether.

<SnackbarProvider>
    <App />
</SnackbarProvider>
see the code on desktop.

Don't like to have icons in your snackbars? hide them then.

<SnackbarProvider hideIconVariant={false}>
    <App />
</SnackbarProvider>
see the code on desktop.

Set dense to true to have less margins for your snackbars. This prop is recommended for displaying snackbars on devices with smaller screen sizes (i.e. mobiles).

<SnackbarProvider dense={false}>
    <App />
</SnackbarProvider>
see the code on desktop.

preventDuplicate prevents snackbars with the same message to be displayed multiple times.

<SnackbarProvider preventDuplicate>
    <App />
</SnackbarProvider>


const message = 'You only see me once.';
this.props.enqueueSnackbar(message, { 
    preventDuplicate: true,
});
see the code on desktop.

You can add actions to snackbars in the same manner specified in material-ui docs.

The default behaviour of action button is to dismiss the the snackbar. If you want to define your own event handler, you can useonClickAction prop.

Note: This way you're adding action to all of the snackbars. You can also add actions to an individual snackbar (next section).

<SnackbarProvider
    action={(
        <Button color="secondary" size="small">
            {'Dismiss'}
        </Button>
    )}
>
    <App />
</SnackbarProvider>


// custom event hander
<SnackbarProvider
    action={(
        <Button color="secondary" size="small">
            {'Alert'}
        </Button>
    )}
    onClickAction={() => {
        alert('Clicked on my action button.');
    }}
>
    <App />
</SnackbarProvider>
see the code on desktop.

You can customize snackbars individually.

For example, "with action" button enqueues a snackbar which has an action button and hides after 7 seconds.

You can pass any other material-ui snackbar props in the second parameter ofenqueueSnackbar.

const message = 'Your notification here';

// normal button
this.props.enqueueSnackbar(message);

// with action button
this.props.enqueueSnackbar(message, {
    variant: 'warning',
    autoHideDuration: 7000,
    action: (
        <Button size="small">{'Dismiss'}</Button>
    ),
});
see the code on desktop.

Use the key returned by enqueueSnackbarto close snackbars programmatically.

// on connection loss
const key = this.props.enqueueSnackbar('No connection!', { 
    variant: 'error',
    persist: true,
});

// when we're back online
this.props.closeSnackbar(key);
see the code on desktop.

Use persist flag to keep a snackbar in the view.
Take extra case when using this option. Persistent snackbars can only get dismissed programmatically or by providing an action button.

Note: notistack will ignore the oldest snackbar anyway, if all of the snackbars on the screen are persistent (i.e. you enqueue 3 persistent snackbars while maxSnack is 3).
This is to allow room for other snackbars to get displayed.

const message = 'Your notification here';

// enqueue persistent snackbar
this.props.enqueueSnackbar(message, { 
    persist: true,
});

// enqueue normal snackbar
this.props.enqueueSnackbar(message, { 
    persist: false,
});
see the code on desktop.

Using material-ui classes prop, you can override styles applied to a snackbar based on its variant. For more info see overriding with classes.

This accepts the following keys:
variantSuccessvariantError
variantWarningvariantInfo

const styles = {
    success: { backgroundColor: 'purple' },
    error: { backgroundColor: 'blue' },
    warning: { backgroundColor: 'green' },
    info: { backgroundColor: 'yellow' },
};


<SnackbarProvider
    classes={{
        variantSuccess: classes.success,
        variantError: classes.error,
        variantWarning: classes.warning,
        variantInfo: classes.info,
    }}
>
    <App />
</SnackbarProvider>
see the code on desktop.

notistack is compatible with state management libraries such as Redux and Mobx.

You can dispatch an enqueueSnackbar action and handle it in your reducers. This has lots of applications but particularly useful when you want to inform the user of the result of a network request.

Note that redux/mobx support is not native in notistack. You can head over to the links below for each library example:
Redux: codesandbox
Mobx: codesandbox

see the code on desktop.