Skip to content
Related Articles

Related Articles

Improve Article

ReactJS UI Ant Design Cascader Component

  • Last Updated : 01 Jun, 2021

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/




My Personal Notes arrow_drop_up
Recommended Articles
Page :