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.
- 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.
- 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.
- 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:
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.
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Step to Run Application: Run the application using the following command from the root directory of the project:
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: