How To Use Notistack In Your React App.

In this article, we will learn How to use Notistack notification in your react app.

• First of all, we have to create a react application.
• And then, Install Notistack package.

npm i notistack

• Then import the material ui  in your project.

npm install @mui/material @emotion/react @emotion/styled

Now open your file and add the code given below :

import React, { useCallback, Fragment } from 'react';
import Button from '@mui/material/Button';
import Paper from '@mui/material/Paper';
import { useSnackbar } from 'notistack';

const styles = {
    root: {
        flexGrow: 1,
        display: 'flex',
        margin: 16,
        justifyContent: 'center',
        alignItems: 'middle'
    },
    button: {
        margin: 8,
        borderColor: '#313131',
        color: '#313131'
    },
    success: {
        borderColor: '#43a047',
        color: '#43a047'
    },
    error: {
        borderColor: '#d32f2f',
        color: '#d32f2f'
    },
    info: {
        borderColor: '#2979ff',
        color: '#2979ff'
    },
    warning: {
        borderColor: '#ffa000',
        color: '#ffa000'
    }
};

const buttons = [
    { variant: 'success', message: 'Successfully done the operation.' },
    { variant: 'error', message: 'Something went wrong.' },
    { variant: 'warning', message: 'Something could go wrong' },
    { variant: 'info', message: 'For your info...' }
];

const MessageButtons = () => {
    const { enqueueSnackbar, closeSnackbar } = useSnackbar();

    const handleClick = useCallback((button) => () => {
        console.log('button', button)
        enqueueSnackbar(button.message, { variant: button.variant });
    }, [enqueueSnackbar]);

    return (
        <Paper style={styles.root}>
            {buttons.map((button) => (
                <Button
                    key={button.variant}
                    variant='outlined'
                    style={{ ...styles.button, ...styles[button.variant] }}
                    onClick={handleClick(button)}
                >
                    {button.variant}
                </Button>
            ))}
        </Paper>
    );
};

export default MessageButtons;

Now open your app.js file and add the code given below :

import './App.css';
import { SnackbarProvider } from "notistack";
import MessageButtons from './Components/MessageButtons';

function App() {
  return (
    <div className="App">
      <SnackbarProvider maxSnack={3}>
        <MessageButtons />
      </SnackbarProvider>
    </div>
  );
}

export default App;

Output: