React Suite Placement 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 Placement Drawer. The Drawer component is a panel that slides from the edge of the display screen and this drawer can be slide from four different sides i.e, from left, right, top, and bottom.

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:

<Drawer placement={placement} open={isDrawer} 
    onClose={() => setIsDrawer(false)}>
    <Drawer.Header>
        <Drawer.Title>...</Drawer.Title>
        <Drawer.Actions>
            <Button onClick={() => setIsDrawer(false)}>
                ...
            </Button>
        </Drawer.Actions>
    </Drawer.Header>
    <Drawer.Body>
        ...
    </Drawer.Body>
</Drawer>

Drawer Props:

autoFocus: The Drawer is opened and is automatically focused on its own, and it is accessible to screen readers when this 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 Drawer hides or closes.
onOpen: This is a callback function that is triggered when the Drawer display.
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:

Example 1: Below example demonstrates the placement of the drawer on the Left side.

JavaScript

import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Drawer, Button, ButtonToolbar, 
    IconButton } from "rsuite";
import { ArrowRight } from "@rsuite/icons/";

export default function App() {

    const [isDrawer, setIsDrawer] = React.useState(false);
    const [placement, setPlacement] = React.useState();
    const handleOpen = key => {
        setIsDrawer(true);
        setPlacement(key);
    };

    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Placement Drawer
            </h4>

            <div>
                <ButtonToolbar>
                    <IconButton icon={<ArrowRight />} 
                        onClick={() => handleOpen('left')}>
                        Left
                    </IconButton>
                </ButtonToolbar>

                <Drawer placement={placement} 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! This is an 
                            example of Left Drawer
                        </p>
                    </Drawer.Body>
                </Drawer>
            </div>
        </div>
    );
}

Output:

Example 2: Below example demonstrates the placement of the drawer on the right side.

JavaScript

import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Drawer, Button, ButtonToolbar, 
    IconButton } from "rsuite";
import { ArrowLeft } from "@rsuite/icons/";

export default function App() {
    const [isDrawer, setIsDrawer] = React.useState(false);
    const [placement, setPlacement] = React.useState();
    const handleOpen = key => {
        setIsDrawer(true);
        setPlacement(key);
    };

    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Placement Drawer
            </h4>

            <div>
                <ButtonToolbar>
                    <IconButton icon={<ArrowLeft />} 
                        onClick={() => handleOpen('right')}>
                        Right
                    </IconButton>
                </ButtonToolbar>

                <Drawer placement={placement} 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! This is an 
                            example of Right Drawer
                        </p>
                    </Drawer.Body>
                </Drawer>
            </div>
        </div>
    );
}

Output:

Example 3: Below example demonstrates the placement of the drawer at the bottom.

JavaScript

import React from "react";
import "rsuite/dist/rsuite.min.css";
import { Drawer, Button, ButtonToolbar, 
        IconButton } from "rsuite";
import { ArrowDown } from "@rsuite/icons/";

export default function App() {

    const [isDrawer, setIsDrawer] = React.useState(false);
    const [placement, setPlacement] = React.useState();

    const handleOpen = key => {
        setIsDrawer(true);
        setPlacement(key);
    };
    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Placement Drawer
            </h4>

            <div>
                <ButtonToolbar>
                    <IconButton icon={<ArrowDown />} 
                        onClick={() => handleOpen('bottom')}>
                        Bottom
                    </IconButton>
                </ButtonToolbar>

                <Drawer placement={placement} 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! This is an example of Bottom Drawer
                        </p>
                    </Drawer.Body>
                </Drawer>
            </div>
        </div>
    );
}

Output:

Example 4: Below example demonstrates the placement of the drawer at the top.

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 [placement, setPlacement] = React.useState();
    const handleOpen = key => {
        setIsDrawer(true);
        setPlacement(key);
    };

    return (
        <div style={{ padding: 10 }}>
            <h2>GeeksforGeeks</h2>
            <h4 style={{ color: "green" }}>
                React Suite Placement Drawer
            </h4>

            <div>
                <ButtonToolbar>
                    <IconButton icon={<ArrowUp />} 
                        onClick={() => handleOpen('top')}>
                        Top
                    </IconButton>
                </ButtonToolbar>

                <Drawer placement={placement} 
                    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! This is an example of Top Drawer</p>
                    </Drawer.Body>
                </Drawer>
            </div>
        </div>
    );
}