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>
);
}
|
Output:
Reference: https://rsuitejs.com/components/drawer/#placement