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>neveropen</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>neveropen</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>neveropen</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>neveropen</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>neveropen</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>neveropen</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>neveropen</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>neveropen</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
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
