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

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

// OR
handleClick = () => {
    this.props.enqueueSnackbar('Your notification here');
}
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>


this.props.enqueueSnackbar('Your notification here', {
    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.

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 action and hides after 1 second.

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

// normal button
this.props.enqueueSnackbar('Your notification here');



// with action button
this.props.enqueueSnackbar('Your notification here', {
    variant: 'warning',
    action: (
        <Button size="small">{'Dismiss'}</Button>
    ),
    autoHideDuration: 1000,
});
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',
    autoHideDuration: undefined,
});

// when we're back online
this.props.closeSnackbar(key);
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 redux. So 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 support is not native in notistack. You can head over to this minimal redux example and use the code from there.

see the code on desktop.