notistack
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    notistack logo

    Notistack is a notification library which makes it extremely easy to display notifications on your web apps. It is highly customizable and enables you to stack snackbars/toasts on top of one another. Visit documentation website for demos.

    npm version npm downloads package license

    Stacking behaviour Dismiss oldest when reached maxSnack (3 here)

    Table of Contents

    Getting Started

    Use your preferred package manager:

    npm install notistack
    yarn add notistack
    

    If you're using Material-UI version 4.x.x or lower, download a compatible version of notistack using:

    npm install notistack@latest-mui-v4
    yarn add notistack@latest-mui-v4
    

    How to use

    1: Wrap your app inside a SnackbarProvider component: (see docs for a full list of available props)
    Note: If you're using material-ui ThemeProvider, make sure SnackbarProvider is a child of it.

    import { SnackbarProvider } from 'notistack';
    
    <SnackbarProvider maxSnack={3}>
        <App />
    </SnackbarProvider>

    2: Export any component that needs to send notification using withSnackbar. By doing this, you'll have access to methods enqueueSnackbar and closeSnackbar, where the former can be used to send snackbars.

    import { withSnackbar } from 'notistack';
    
    class MyComponent extends Component {
      handleNetworkRequest = () => {
         fetchSomeData()
            .then(() => this.props.enqueueSnackbar('Successfully fetched the data.'))
            .catch(() => this.props.enqueueSnackbar('Failed fetching data.'));
      };
    
      render(){
         //...
      };
    
    };
    
    export default withSnackbar(MyComponent);

    2 (alternative): You can use useSnackbar hook in your functional components as well.

    import { useSnackbar } from 'notistack';
    
    const MyButton = () => {
        const { enqueueSnackbar, closeSnackbar } = useSnackbar();
    
        const handleClick = () => {
            enqueueSnackbar('I love hooks');
        };
    
        return (
            <Button onClick={handleClick}>Show snackbar</Button>
        );
    }

    Online demo

    Visit documentation website to see all the demos. Or play with a minimal working example: codesandbox

    Redux and Mobx support:

    notistack is compatible with state management libraries such as Redux and Mobx. See notistack documentation for more info.

    Contribution

    Open an issue and your problem will be solved.

    Author - Contact

    Hossein Dehnokhalaji

    Hossein Dehnokhalaji Instagram profile Hossein Dehnokhalaji Linkedin profile Hossein Dehnokhalaji email address

    Install

    npm i notistack

    DownloadsWeekly Downloads

    313,262

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    324 kB

    Total Files

    13

    Last publish

    Collaborators

    • iamhosseindhv