React Suite Backdrop Drawer

Last Updated : 30 Jun, 2022

React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application.

In this article, we’ll learn about React Suite Backdrop Drawer. Using a backdrop, it displays the background when it is opened when this is set to true.

Drawer Props:

autoFocus: The Drawer is opened and is automatically focused on its own, and it is accessible to screen readers when it is set to true.
backdrop: The Drawer will display the background when it is opened when this is set to true.
backdropClassName: It is used to add an optional extra class name to .modal-backdrop.
classPrefix: It is used to denote the prefix of the component CSS class.
enforceFocus: The Drawer will prevent the focus from leaving when opened when this is set to true.
full: This is a deprecated prop used to enable the full screen.
keyboard: This will close the Drawer when the ESC key is pressed.
onEnter: It is a callback function that is triggered before the Drawer transitions in.
onEntered: It is a callback function that is triggered after the Drawer finishes transitioning in.
onEntering: It is a callback function that is triggered as the Drawer begins to transition in.
onExit: This is a callback function that is triggered right before the Drawer transitions out.
onExited: This is a callback function that is triggered after the Drawer finishes transitioning out.
onExiting: This is a callback function that is triggered as the Drawer begins to transition out.
onClose: This is a callback function that is triggered when the Drawer hides or closes.
onOpen: This is a callback function that is triggered when the Drawer is displayed.
placement: This is used for the placement of the Drawer.
open: This is used to open the Drawer.
size: This is used to set the size of Drawer.

Creating React Application And Installing Module:

Step 1: Create a React application using the given command:

npm create-react-app projectname

Step 2: After creating your project, move to it using the given command

cd project-name

Step 3: Now Install the rsuite node package using the given command:

npm install rsuite

Project Structure: Now your project structure should look like the following:

Using Drawer Component: Import the Drawer component to your App.js file as given below:

import { Drawer } from 'rsuite';
// or
import Drawer from 'rsuite/Drawer';

Syntax:

// Import Statement
import { Drawer } from 'rsuite';
// or
import Drawer from 'rsuite/Drawer';

// Function component
Function App () {
return (
  <div>
      <IconButton icon={<ArrowRight />} 
        onClick={() => handleOpen('left')}>
        Left
      </IconButton>
     <Drawer backdrop="static" open={isDrawer} 
       onClose={() => setIsDrawer(false)}>
       <Drawer.Header>
         <Drawer.Title>...</Drawer.Title>
         <Drawer.Actions>
           <Button onClick={() => setIsDrawer(false)} 
             color="green" appearance="primary">
             Close
           </Button>
         </Drawer.Actions>
       </Drawer.Header>
       <Drawer.Body>
         ...
       </Drawer.Body>
     </Drawer>
   </div>
 );
}

Example 1: Below example demonstrates the static backdrop in a drawer. If you do not want to close the Drawer by clicking the background then, set the backdrop to ‘static’. In the below example, when we are clicking the background, the drawer is not closing.

Javascript

import React from "react"; 
import "rsuite/dist/rsuite.min.css"; 
import { Drawer, Button, ButtonToolbar,  
    IconButton } from "rsuite"; 
import { ArrowUp } from "@rsuite/icons/"; 
  
export default function App() { 
    const [isDrawer, setIsDrawer] = React.useState(false); 
  
    const handleOpen = key => { 
        setIsDrawer(true); 
    }; 
  
    return ( 
        <div style={{ padding: 10 }}> 
            <h2>GeeksforGeeks</h2> 
            <h4 style={{ color: "green" }}> 
                React Suite Backdrop in Drawer 
            </h4> 
  
            <div> 
                <Button appearance="primary" 
                    color="green" onClick={handleOpen}> 
                    Open Drawer 
                </Button> 
  
                <Drawer backdrop="static" open={isDrawer}  
                    onClose={() => setIsDrawer(false)}> 
                    <Drawer.Header> 
                        <Drawer.Title>GeeksforGeeks</Drawer.Title> 
                        <Drawer.Actions> 
                            <Button onClick={() => setIsDrawer(false)}  
                                color="green"
                                appearance="primary"> 
                                Close 
                            </Button> 
                        </Drawer.Actions> 
                    </Drawer.Header> 
                    <Drawer.Body> 
                        <p> 
                            Hi Geek! You can't close  
                            this Drawer with Backdrop 
                        </p> 
                    </Drawer.Body> 
                </Drawer> 
            </div> 
        </div> 
    ); 
}

Output:

Example 2: Below example demonstrates the true backdrop in a drawer. When the drawer is set to ‘true’, the Drawer will display the background when it is opened and after clicking on the background, it will close the Drawer.

Javascript

import React from "react"; 
import "rsuite/dist/rsuite.min.css"; 
import { Drawer, Button, ButtonToolbar, IconButton } from "rsuite"; 
import { ArrowUp } from "@rsuite/icons/"; 
  
export default function App() { 
  
    const [isDrawer, setIsDrawer] = React.useState(false); 
  
    const handleOpen = key => { 
        setIsDrawer(true); 
    }; 
    return ( 
        <div style={{ padding: 10 }}> 
            <h2>GeeksforGeeks</h2> 
            <h4 style={{ color: "green" }}> 
                React Suite Backdrop in Drawer 
            </h4> 
  
            <div> 
                <Button appearance="primary" 
                    color="green" onClick={handleOpen}> 
                    Open Drawer 
                </Button> 
  
                <Drawer backdrop={true} open={isDrawer}  
                    onClose={() => setIsDrawer(false)}> 
                    <Drawer.Header> 
                        <Drawer.Title>GeeksforGeeks</Drawer.Title> 
                        <Drawer.Actions> 
                            <Button onClick={() => setIsDrawer(false)}  
                                color="green"
                                appearance="primary"> 
                                Close 
                            </Button> 
                        </Drawer.Actions> 
                    </Drawer.Header> 
                    <Drawer.Body> 
                        <p> 
                            Hi Geek! You can close  
                            this Drawer with Backdrop 
                        </p> 
                    </Drawer.Body> 
                </Drawer> 
            </div> 
        </div> 
    ); 
}

Output:

Example 3: Below example demonstrates the false backdrop in a drawer. Now to close the drawer when set to ‘false’, we can’t do it by clicking the background rather we click the close or confirm buttons.

Javascript

import React from "react"; 
import "rsuite/dist/rsuite.min.css"; 
import { Drawer, Button, ButtonToolbar,  
        IconButton } from "rsuite"; 
import { ArrowUp } from "@rsuite/icons/"; 
  
export default function App() { 
    const [isDrawer, setIsDrawer] = React.useState(false); 
  
    const handleOpen = key => { 
        setIsDrawer(true); 
    }; 
    return ( 
        <div style={{ padding: 10 }}> 
            <h2>GeeksforGeeks</h2> 
            <h4 style={{ color: "green" }}> 
                React Suite Backdrop in Drawer 
            </h4> 
  
            <div> 
                <Button appearance="primary" 
                    color="green" onClick={handleOpen}> 
                    Open Drawer 
                </Button> 
  
                <Drawer backdrop={false} open={isDrawer}  
                    onClose={() => setIsDrawer(false)}> 
                    <Drawer.Header> 
                        <Drawer.Title>GeeksforGeeks</Drawer.Title> 
                        <Drawer.Actions> 
                            <Button onClick={() => setIsDrawer(false)} 
                                color="green"
                                appearance="primary"> 
                                Close 
                            </Button> 
                        </Drawer.Actions> 
                    </Drawer.Header> 
                    <Drawer.Body> 
                        <p> 
                            Hi Geek! You can't close  
                            this Drawer with Backdrop 
                        </p> 
                    </Drawer.Body> 
                </Drawer> 
            </div> 
        </div> 
    ); 
}