How to use SnackBar Component in ReactJS ?

ReactJS provides developers with a wide range of components to create interactive and dynamic web applications. One such component is the SnackBar, which is commonly used to display temporary messages or notifications to users. Creating a SnackBar component allows for the presentation of these messages. Let’s explore how to implement a SnackBar component in a React application.

Prerequisites

• Basic knowledge of React and JavaScript
• Node.js installed on your machine

Steps to create the application:

Step 1: Create a React application using the following command.

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command.

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.

npm install @material-ui/core
npm install @material-ui/icons

Project Structure:

Project Structure

Example: Now write down the following code in the App.js file.

Javascript

import React from "react";
import IconButton from "@material-ui/core/IconButton";
import Snackbar from "@material-ui/core/Snackbar";
import CloseIcon from "@material-ui/icons/Close";
import Button from "@material-ui/core/Button";

export default function App() {
    const [open, setOpen] = React.useState(false);

    const handleToClose = (event, reason) => {
        if ("clickaway" == reason) return;
        setOpen(false);
    };

    const handleClickEvent = () => {
        setOpen(true);
    };

    return (
        <div style={{}}>
            <h4>
                How to use SnackBar Component in ReactJS?
            </h4>
            <Button onClick={handleClickEvent}>
                Open Snackbar
            </Button>
            <Snackbar
                anchorOrigin={{
                    horizontal: "left",
                    vertical: "bottom",
                }}
                open={open}
                autoHideDuration={5000}
                message="Sample Warning"
                onClose={handleToClose}
                action={
                    <React.Fragment>
                        <IconButton
                            size="small"
                            aria-label="close"
                            color="inherit"
                            onClick={handleToClose}
                        >
                            <CloseIcon fontSize="small" />
                        </IconButton>
                    </React.Fragment>
                }
            />
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.