Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • NextJS
  • Material UI
  • React Bootstrap
  • React Suite
  • Ant Design
  • Reactstrap
  • BlueprintJS
  • React Desktop
  • React Native
  • React Rebass
  • React Spring
  • React Evergreen
  • ReactJS
  • ReactJS
  • JS Formatter
  • Web Technology
Open In App
Next Article:
How to use Slide Component in ReactJS ?
Next article icon

How to use SnackBar Component in ReactJS ?

Last Updated : 26 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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.


Next Article
How to use Slide Component in ReactJS ?
author
gouravhammad
Improve
Article Tags :
  • JavaScript
  • Web Technologies
  • ReactJS
  • Web technologies
  • Material-UI
  • React-Questions

Similar Reads

  • How to use Slide Component in ReactJS ?
    Slide Component adds a Slide animation to a child element or component. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Slide Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReactJSMaterial UISteps to Create th
    3 min read
  • How to use Zoom Component in ReactJS?
    Zoom Component adds a Zoom animation to a child element or component. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Zoom Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReact JSMaterial UIApproach:The React c
    2 min read
  • How to use List Component in ReactJS?
    Lists are continuous, vertical indexes of text or images. Material UI for React has this component available for us, and it is very easy to integrate. We can use the List Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReactJSSteps to Create the React Application And In
    2 min read
  • How to use Badge Component in ReactJS?
    Badge generates a small badge to the top-right of its children component. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Badge Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReact JSMaterial UISteps to Create
    2 min read
  • How To Use Modal Component In ReactJS?
    Modals are a popular UI component used to display content in a pop-up window like alerts, forms, or additional information. In ReactJS, there are multiple ways to implement a modal. In this article, we will discuss two common approaches: using reusable functional components and using the Material-UI
    4 min read
  • How to use Paper Component in ReactJS ?
    In Material Design, the physical properties of paper are translated to the screen. Material UI for React has this component available for us and it is very easy to integrate. We can use the Paper Component in ReactJS using the following approach. Prerequisites:React JSMaterial UIApproachTo use Paper
    2 min read
  • How to use Tooltip component in ReactJS?
    Tooltips display informative text when users hover over, focus on, or tap an element. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Tooltip Component in ReactJS using the following approach. Prerequisites:Nodejs and NPMReact JSMaterial UI
    2 min read
  • How to use Popper Component in ReactJS ?
    A Popper is used to show the part of the content on top of another. It's an alternative feature for react-popper. Material UI for React has this component available for us, and it is simple and very easy to integrate. For perfect positioning, it uses 3rd party library which is Popper.js. Prerequisit
    3 min read
  • How to use Avatar Component in ReactJS?
    Avatars are found throughout material design with uses in everything from tables to dialog menus. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Avatar Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReactJSSt
    2 min read
  • How to use Portal Component in ReactJS ?
    The portal component renders its children into a new subtree outside the current DOM hierarchy. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Portal Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReact JSMat
    2 min read
geeksforgeeks-footer-logo
Corporate & Communications Address:
A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)
Registered Address:
K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305
GFG App on Play Store GFG App on App Store
Advertise with us
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox
Improvement
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
geeksforgeeks-suggest-icon
Create Improvement
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
geeksforgeeks-improvement-icon
Suggest Changes
min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences
Admission Experiences
Career Journeys
Work Experiences
Campus Experiences
Competitive Exam Experiences