How to use Backdrop Component in React JS?

The Backdrop component serves to highlight specific elements or parts within a user interface. In React, Material UI offers this component, making integration straightforward. Utilizing the Backdrop Component in React JS is easily achieved through the following approach.

Prerequisites

• NodeJS or NPM
• React JS
• Material UI

Steps for Creating React Application And Installing Module:

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

Project Structure

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@material-ui/core": "^4.12.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

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

import React from "react";
import Button from "@material-ui/core/Button";
import CircularProgress from "@material-ui/core/CircularProgress";
import { makeStyles } from "@material-ui/core/styles";
import Backdrop from "@material-ui/core/Backdrop";

const useStyles = makeStyles((theme) => ({
    backdrop: {
        color: "#fff",
        zIndex: theme.zIndex.drawer + 1,
    },
}));

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

    return (
        <div>
            <h4>How to use Backdrop Component in ReactJS?</h4>
            <Button
                variant="outlined"
                color="primary"
                onClick={() => {
                    setOpen(!open);
                }}
            >
                Backdrop Demo
            </Button>
            <Backdrop
                className={classes.backdrop}
                open={open}
                onClick={() => {
                    setOpen(false);
                }}
            >
                <CircularProgress color="inherit" />
            </Backdrop>
        </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

gouravhammad

Follow

Improve

Article Tags :

• JavaScript
• ReactJS
• Web Technologies
• Material-UI
• React-Questions

+1 More