How to use Backdrop Component in React JS?
Last Updated :
06 Dec, 2023
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
Share your thoughts in the comments
Please Login to comment...