How to use SnackBar Component in ReactJS ?
Last Updated :
23 Nov, 2023
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
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.
Share your thoughts in the comments
Please Login to comment...