Snackbar in React

Introduction

In this article, I will guide you through the process of adding a Snackbar in React.js.

Prerequisites of React

• Familiarity with HTML and JavaScript.
• node.js installed
• Basic knowledge of React JS
• Visual Studio Code

Create React Project

To create a React app, use the following command in the terminal.

npx create-react-app matui

Open the newly created project in Visual Studio Code, and install Material-UI; run the following command in your React project's root directory.

npm install @material-ui/core

Now right-click on the src folder and create a new component named 'Snackbardemo.js'. Import the following component from Material UI in the Snackbardemo.js file.

import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';

Now, add the following code in the Snackbardemo.js file.

import React from 'react'
import Grid from '@mui/material/Grid';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Snackbar from '@mui/material/Snackbar';
function Snackbardemo() {
    const [state, setState] = React.useState({
        open: false,
        vertical: 'top',
        horizontal: 'center',
      });
      const { vertical, horizontal, open } = state;
    
      const handleClick = (newState) => () => {
        setState({ ...newState, open: true });
      };
    
      const handleClose = () => {
        setState({ ...state, open: false });
      };
    
      const buttons = (
        <React.Fragment>
          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
            <Button onClick={handleClick({ vertical: 'top', horizontal: 'center' })}>
              Top-Center
            </Button>
          </Box>
          <Grid container justifyContent="center">
            <Grid item xs={6}>
              <Button onClick={handleClick({ vertical: 'top', horizontal: 'left' })}>
                Top-Left
              </Button>
            </Grid>
            <Grid item xs={6} textAlign="right">
              <Button onClick={handleClick({ vertical: 'top', horizontal: 'right' })}>
                Top-Right
              </Button>
            </Grid>
            <Grid item xs={6}>
              <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'left' })}>
                Bottom-Left
              </Button>
            </Grid>
            <Grid item xs={6} textAlign="right">
              <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'right' })}>
                Bottom-Right
              </Button>
            </Grid>
          </Grid>
          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
            <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'center' })}>
              Bottom-Center
            </Button>
          </Box>
        </React.Fragment>
      );
    
      return (
        <Box sx={{ width: 500 }}>
          {buttons}
          <Snackbar
            anchorOrigin={{ vertical, horizontal }}
            open={open}
            onClose={handleClose}
            message="I love snacks"
            key={vertical + horizontal}
          />
        </Box>
      );
}

export default Snackbardemo

Now, import the Snackbardemo component in the src/App.js file.

import './App.css';
import Snackbardemo from './Snackbardemo'
function App() {
  return (
    <div className="App">
      <Snackbardemo/>
    </div>
  );
}

export default App;

Run the project using the 'npm start' command and check the result.

Summary

This article provides a step-by-step guide on creating snakbar in React applications using the Material UI library.