React MUI Backdrop API

Last Updated : 17 Mar, 2023

Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.

In this article, we will discuss the React MUI Backdrop API. The Backdrop API provides a fade screen for the user, which can be used to show the loading state of a website.

Import Statement:

import Backdrop from '@mui/material/Backdrop';
// or
import { Backdrop } from '@mui/material';

Backdrop Props:

children: It represents the content of the component.
classes: It helps to override styles applied to the component.
component: The component used for the root node. Either a string to use an HTML element or a component.
components: An alias for the slots prop.
open: It is a boolean value. It determines whether the backdrop should be opened or not. It is false by default.
componentsProps: An alias for the slotProps prop.
invisible: It is a boolean value. It determines whether the backdrop should be visible or not. It is false by default.
slotProps: This is the extra props for the slot components which can be overridden.
slots: It is either a string to use an HTML element or a component, used for each slot inside.
sx: A superset of CSS that packages all of the style functions.
transitionDuration: it specifies the duration of the transition.

CSS Rules:

root(.MuiBackdrop-root): It is the style applied to the root element.
invisible(.MuiBackdrop-invisible): It is the style applied to the root element if invisible={true}.

Syntax:

<Backdrop></Backdrop>

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 required module using the following command:

npm install @mui/material 
npm install @emotion/react 
npm install @emotion/styled

Project Structure: It will look like the following.

Example 1: In this example, we added the Backdrop component with the CircularProgess Component.

App.js

Javascript

import { Backdrop, CircularProgress } from '@mui/material';
 
 
export default function App() {
    return (
        <div style={{ margin: 10 }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h4>React MUI Backdrop API</h4>
            <Backdrop
 
                open={"open"}
 
            >
                <span style={{ fontSize: 40 }}>l</span>
                <CircularProgress color="inherit" />
                <span style={{ fontSize: 40 }}>adding...</span>
            </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/, you will see the following output.

Example 2: In this example, we are creating two states using react hook useState naming open, and text. We are adding a function named HandleClick that changes the Open state. We added a button that calls the HandleClick the function on-click.

App.js

Javascript

import { Backdrop, Button, LinearProgress } from '@mui/material';
import { useState } from 'react';
 
 
export default function App() {
    const [open, setOpen] = useState(true);
    const [text, setText] = useState("Close")
    const handleClick = () => {
        setOpen(!open);
        if (open == true)
            setText("Open")
        else setText("Close")
    }
    return (
        <div style={{ margin: 10 }}>
            <h2 style={{ color: "green" }}>GeeksforGeeks</h2>
            <h5>React MUI Backdrop API</h5>
            <Backdrop sx={{ color: '#fff', height: '40%', margin: 1 }}
                open={open}
            >
                <LinearProgress sx={{ width: '50%' }} 
                    color="success" />
            </Backdrop>
            Backdrop ?
            <Button variant='contained' sx={{ margin: 1 }} 
                onClick={handleClick}>
                {text}</Button>
        </div>
    );
}