Open In App

How to use Backdrop Component in React JS?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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.

Javascript




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



Last Updated : 06 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads