Introduction

In this article, we will discuss React Material UI Progress bar and Snackbar. Progress bar is used to inform the user that data loading is in progress. Basically it is used to show the loading state of data in an application.
You can check my previous articles in which we discussed ReactJS and its basic components from the below-mentioned links.
Prerequisites

Create ReactJS project

Let's first create a React application using the following command.
  1. npx create-react-app platform

Install Material-UI

Now Install Material-UI by using the following command.
  1. npm install @material-ui/core --save
Now, right-click on the "src" folder and add a new component named 'Progressdemo.js'
Add the following code in Progressdemo component.
  1. import React from 'react';
  2. import clsx from 'clsx';
  3. import { makeStyles } from '@material-ui/core/styles';
  4. import CircularProgress from '@material-ui/core/CircularProgress';
  5. import { green } from '@material-ui/core/colors';
  6. import Button from '@material-ui/core/Button';
  7. import AppBar from '@material-ui/core/AppBar';
  8. import Toolbar from '@material-ui/core/Toolbar';
  9. const useStyles = makeStyles(theme => ({
  12. buttonSuccess: {
  13. backgroundColor: green[500],
  14. '&:hover': {
  15. backgroundColor: green[700],
  16. },
  17. },
  19. buttonProgress: {
  20. color: green[500],
  21. position: 'absolute',
  22. top: '50%',
  23. left: '50%',
  24. marginTop: -12,
  25. marginLeft: -12,
  26. },
  27. }));
  29. export default function Progessdemo() {
  30. const classes = useStyles();
  31. const [loading, setLoading] = React.useState(false);
  32. const [success, setSuccess] = React.useState(false);
  33. const timer = React.useRef();
  35. const buttonClassname = clsx({
  36. [classes.buttonSuccess]: success,
  37. });
  40. const handleButtonClick = () => {
  41. if (!loading) {
  42. setSuccess(false);
  43. setLoading(true);
  44. timer.current = setTimeout(() => {
  45. setSuccess(true);
  46. setLoading(false);
  47. }, 2000);
  48. }
  49. };
  51. return (
  52. <>
  53. <AppBar position="static">
  54. <Toolbar style={{ 'paddingLeft': "600px" }}>
  55. Material UI Progres Bar
  56. </Toolbar>
  57. </AppBar>
  58. <div>
  59. <div style={{ 'paddingLeft': "600px" }}>
  60. {loading && <CircularProgress size={80} className={classes.buttonProgress} />}
  61. </div>
  62. <div style={{ 'paddingLeft': "600px" }}>
  63. <Button
  64. variant="contained"
  65. color="primary"
  66. className={buttonClassname}
  67. disabled={loading}
  68. onClick={handleButtonClick}
  69. >
  70. Click
  71. </Button>
  73. </div>
  75. </div>
  76. </>
  77. );
  78. }
Run the project by using 'npm start' and check the result:
Now, right-click on the "src" folder and add a new component named 'Progressdemo1.js' and add the following code int this component
  1. import React from 'react';
  2. import { makeStyles } from '@material-ui/core/styles';
  3. import LinearProgress from '@material-ui/core/LinearProgress';
  4. import AppBar from '@material-ui/core/AppBar';
  5. import Toolbar from '@material-ui/core/Toolbar';
  6. export default function Progessdemo1() {
  7. return (
  8. <>
  9. <div style={{"marginBottom":"20px"}}>
  10. <AppBar position="static">
  11. <Toolbar style={{ 'paddingLeft': "600px" }}>
  12. Material UI Progres Bar
  13. </Toolbar>
  14. </AppBar>
  15. </div>
  16. <div>
  17. <LinearProgress />
  18. <LinearProgress color="secondary" />
  19. </div>
  20. </>
  21. );
  22. }

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

Now, right-click on the "src" folder and add a new component named 'Snackbar.js' and add the following code int this component
  1. import React from 'react';
  2. import Button from '@material-ui/core/Button';
  3. import Snackbar from '@material-ui/core/Snackbar';
  4. import AppBar from '@material-ui/core/AppBar';
  5. import Toolbar from '@material-ui/core/Toolbar';
  6. export default function SnackbarDemo() {
  7. const [state, setState] = React.useState({
  8. open: false,
  9. vertical: 'top',
  10. horizontal: 'center',
  11. });
  13. const { vertical, horizontal, open } = state;
  15. const handleClick = newState => () => {
  16. setState({ open: true, ...newState });
  17. };
  19. const handleClose = () => {
  20. setState({ ...state, open: false });
  21. };
  23. return (
  24. <div>
  25. <AppBar position="static">
  26. <Toolbar style={{ 'paddingLeft': "600px" }}>
  27. Material UI Snack Bar
  28. </Toolbar>
  29. </AppBar>
  31. <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'center' })}>
  32. Bottom-Center
  33. </Button>
  34. <Button onClick={handleClick({ vertical: 'bottom', horizontal: 'left' })}>Bottom-Left</Button>
  35. <Button onClick={handleClick({ vertical: 'top', horizontal: 'left' })}>Top-Left</Button>
  36. <Snackbar
  37. anchorOrigin={{ vertical, horizontal }}
  38. key={`${vertical},${horizontal}`}
  39. open={open}
  40. onClose={handleClose}
  41. message="Snack Bar Demo"
  42. />
  43. </div>
  44. );
  45. }
Open app.js file and add the following code:
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import SnackbarDemo from './Snackbar';
  5. function App() {
  6. return (
  7. <div className="App">
  8. <SnackbarDemo/>
  9. </div>
  10. );
  11. }
  13. export default App;
Run the project by using 'npm start' and check the result:

Summary

In this article, we learned how we add Progressbar and Snackbar in React applications using React material UI.