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:
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.
Contact Us