ReactJS UI Ant Design Cascader Component

Ant Design Library has this component pre-built, and it is very easy to integrate as well. Cascader Component is used as a cascade selection box. This component is used when the user needs to select from a set of the associated data sets. We can use the following approach in ReactJS to use the Ant Design Cascader Component.

Cascader Props:

• allowClear: It is used to indicate whether allow clear or not.
• autoFocus: It is used to get focus when component mounted if this is set to true.
• bordered: It is used to indicate whether it has border style or not.
• changeOnSelect: It is used to change the value on each selection if this is set to true.
• className: It is used for the additional CSS class.
• defaultValue: It is used to denote the initially selected value.
• disabled: It is used to indicate whether disabled select.
• displayRender: It is the render function of displaying selected options.
• dropdownRender: It is used for the customized dropdown content.
• expandIcon: It is used to customize the current item expand icon.
• expandTrigger: It is used to expand the current item when click or hover, one of click hover.
• fieldNames: It is used for the custom field name for label and value and children.
• getPopupContainer: It is the Parent Node to which the selector should be rendered to.
• loadData: It is used to load options lazily.
• notFoundContent: It is used to specify content to show when no result matches.
• options: It is used for the data options of cascade.
• placeholder: It is used to denote the input placeholder.
• popupClassName: It is used for the additional className of popup overlay.
• popupPlacement: It is used for the preset popup alignment.
• popupVisible: It is used to set visible of cascader popup
• showSearch: It is used to indicate whether to show search input in single-mode or not.
• size: It is used to denote the input size.
• style: It is used for the additional style.
• suffixIcon: It is used for the custom suffix icon.
• value: It is used to denote the selected value.
• onChange: It is a callback function that is triggered when finishing cascader select.
• onPopupVisibleChange: It is a callback function that is triggered when the popup shown or hidden.

showSearch Props:

• filter: The option which is passed as a parameter to this function will be included in the filtered set if this function returns true, otherwise it will be excluded.
• limit: It is used to set the count of filtered items.
• matchInputWidth: It is used to indicate whether the width of the list matches input or not.
• render: It is used to render filtered options.
• sort: It is used to sort filtered options.

Methods:

• blur(): This function is used to remove the focus.
• focus(): This function is used to get the focus.

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 from 'react'
import "antd/dist/antd.css";
import { Cascader } from 'antd';

export default function App() {

  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Cascader Component</h4>
      <>
        <Cascader
          options={[
            {
              value: 'Madhya Pradesh',
              label: 'Madhya Pradesh',
              children: [
                {
                  value: 'Indore',
                  label: 'Indore',
                  children: [
                    {
                      value: 'Vijay Nagar',
                      label: 'Vijay Nagar',
                    }, {
                      value: 'Bhawarkuwa',
                      label: 'Bhawarkuwa',
                    },
                    {
                      value: 'MR10',
                      label: 'MR10',
                    },
                  ],
                },
              ],
            },
          ]}
          onChange={(data) => { console.log(data) }}
          placeholder="Select destination" />
      </>
    </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/cascader/