notistack

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

<SnackbarProvider maxSnack={3}>
    <App />
</SnackbarProvider>

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

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

// OR
const handleClick = () => {
    props.enqueueSnackbar(message);
}

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

Vertical
Horizontal
Transition
import Slide from '@material-ui/core/Slide';

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


const message = 'Your notification here';
props.enqueueSnackbar(message, {
    anchorOrigin: {
        vertical: 'bottom',
        horizontal: 'left',
    },
    TransitionComponent: Slide,
});

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>

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

<SnackbarProvider hideIconVariant={false}>
    <App />
</SnackbarProvider>

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>

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

Note: If a user-defined key is passed in the options of enqueueSnackbar, then this prevents snackbars with the same key to be displayed multiple times.

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


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

action can simply be a React node or a callback which returns a React node. Use the latter to find which snackbar has been clicked on. For example, to dismiss a specific snackbar.

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

const message = 'I dont care which snackbar I belong to';
<SnackbarProvider
    action={(
        <Button onClick={() => alert(message) }>
            'Alert'
        </Button>
    )}
>
    <App />
</SnackbarProvider>


// add action to all snackbars
const notistackRef = React.createRef();
const onClickDismiss = key => () => { 
    notistackRef.current.closeSnackbar(key);
}

<SnackbarProvider
    ref={notistackRef}
    action={(key) => (
        <Button onClick={onClickDismiss(key)}>
            'Dismiss'
        </Button>
    )}
>
    <App />
</SnackbarProvider>

You can customize snackbars individually. For example, "customized" button enqueues a snackbar with 2 actions and hides after 3 seconds .

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

// simple
const mesage = 'Your notification here';
props.enqueueSnackbar(message);


// customized
const action = key => (
    <Fragment>
        <Button onClick={() => { alert(`I belong to snackbar with key ${key}`); }}>
            'Alert'
        </Button>
        <Button onClick={() => { this.props.closeSnackbar(key) }}>
            'Dismiss'
        </Button>
    </Fragment>
);

props.enqueueSnackbar(message, {
    variant: 'warning',
    autoHideDuration: 3000,
    action,
});

Use the key returned by enqueueSnackbarto close snackbars programmatically.

Note: You can dismiss all snackbars at once, by not passing a key to closeSnackbar function.

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

// when we're back online
props.closeSnackbar(key);

Use persist flag to keep a snackbar in the view.
Take extra care 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
props.enqueueSnackbar(message, { 
    persist: true,
});

// enqueue normal snackbar
props.enqueueSnackbar(message, { 
    persist: false,
});

You can entirely customize your snackbars by passing a custom children in SnackbarProvider props or options parameter of enqueueSnackbar. Use the provided key to do actions specific to this snackbar (e.g. to close it).

Note: In order for transition animations (e.g. slide, grow, etc) to work, your custom component has to use React.forwardRef. Regardless of what you display inside your component, it needs to be responsive. For example, it needs to occupy full width of the view on mobile and have some minWidth on larger screens. To acheive such responsiveness, notistack exposes SnackbarContentcomponent. Click on < > button on the top-right corner of this example to see this component in action.

<SnackbarProvider
    anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'right',
    }}
    content={(key, message) => (
        <MyCustomChildren id={key} message={message} />
    )}
>
    <App />
</SnackbarProvider>

this.props.enqueueSnackbar('Report Complete');

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>

In rare circumstances you may want to render snackbar container in a DOM node of your choice. This prop uses React Portal to achieve such behaviour.

<SnackbarProvider
    domRoot={document.getElementById("react-notification")}
>
    <App />
</SnackbarProvider>

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