Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

ReactJS UI Ant Design Drawer Component

  • Last Updated : 01 Jun, 2021

Ant Design Library has this component pre-built, and it is very easy to integrate as well. The Drawer component is a panel that slides in from the edge of the screen. We can use the following approach in ReactJS to use the Ant Design Drawer Component.

Drawer Props:

  • afterVisibleChange: It is a callback function that is triggered after the animation ends when switching drawers.
  • bodyStyle: It is used for the style of the drawer content part.
  • className: It is used to pass the class name of the container of the Drawer dialog.
  • closable: It is used to indicate whether a close button is visible on the top right of the Drawer dialog or not
  • closeIcon: It is used for the custom close icon.
  • contentWrapperStyle: It is used for the style of the drawer wrapper of the content part.
  • destroyOnClose: It is used to indicate whether to unmount child components on the closing drawer or not.
  • drawerStyle: It is used for the style of the popup layer element.
  • footer: It is used to denote the footer for Drawer.
  • footerStyle: It is used for the style of the drawer footer part.
  • forceRender: It is used to forcefully pre-render the Drawer component.
  • getContainer: It is used to return the mounted node for Drawer.
  • headerStyle: It is used for the style of the drawer header part.
  • height: It is used to denote the height of the Drawer dialog.
  • keyboard: It is used to indicate whether to support press ESC to close or not.
  • mask: It is used to indicate whether to show mask or not.
  • maskClosable: It is used to indicate whether to close the Drawer or not while clicking on the mask.
  • maskStyle: It is used for the style for Drawer’s mask element.
  • placement: It is used for the placement of the Drawer.
  • push: It is the nested drawers’ push behavior.
  • style: It is used for the style of wrapper element.
  • title: It is used to denote the title for Drawer.
  • visible: It is used to indicate whether the Drawer dialog is visible or not.
  • width: It is used to denote the width of the Drawer dialog.
  • zIndex: It is used to denote the z-index of the Drawer.
  • onClose: It is a callback function that will be triggered when a user clicks the mask, close button, or Cancel button.

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 antd

Project Structure: It will look like the following.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js




import React, { useState } from 'react'
import "antd/dist/antd.css";
import { Drawer, Button } from 'antd';
  
export default function App() {
  
  const [visible, setVisible] = useState(false);
  
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Drawer Component</h4>
      <>
        <Button type="primary"
          onClick={() => {
            setVisible(true);
          }}>Open</Button>
        <Drawer
          title="Drawer Demo"
          placement="left"
          closable={false}
          visible={visible}
          onClose={() => {
            setVisible(false)
          }}
        >
          <p>Item One</p>
          <p>Item Two</p>
          <p>Item Three</p>
          <p>Item Four</p>
          <p>Item Five</p>
        </Drawer>
      </>
    </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:

Reference: https://ant.design/components/drawer/




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!