ReactJS UI Ant Design Select Component

Ant Design Library has this component pre-built, and it is very easy to integrate as well. Select Component is used to select a value from options. It is used to collecting user-provided information from a list of options. We can use the following approach in ReactJS to use the Ant Design Select Component.

Select Props:

• allowClear: It is used to indicate whether to Show a clear button or not.
• autoClearSearchValue: It is used to indicate whether the current search will be cleared on selecting an item or not.
• autoFocus: It is used to get focus by default.
• bordered: It is used to indicate whether it has border style or not.
• clearIcon: It is used for the custom clear icon.
• defaultActiveFirstOption: It is used to indicate whether active first option by default or not.
• defaultOpen: It is used for the Initial open state of the dropdown.
• defaultValue: It is used to denote the initially selected option.
• disabled: It is used to indicate whether disabled select or not.
• dropdownClassName: It is used to pass the className of the dropdown menu.
• dropdownMatchSelectWidth: It is used to determine whether the dropdown menu and the select input are the same widths or not.
• dropdownRender: It is used for the customized dropdown content.
• dropdownStyle: It is used to define the style of dropdown menu.
• filterOption: It is used to filter options by input if this is set to true.
• filterSort: It is the sort function for search options sorting.
• getPopupContainer: It is used to get the Parent Node to which the selector should be rendered to.
• labelInValue: It is used to indicate whether to embed label in value.
• listHeight: It is used to define the Config popup height.
• loading: It is used to indicate the loading state.
• maxTagCount: It is used to denote the Max tag count.
• maxTagPlaceholder: It is used to denote the Placeholder for not showing tags.
• maxTagTextLength: It is used to denote the Max tag text length.
• menuItemSelectedIcon: It is used for the custom menuItemSelected icon with multiple options.
• mode: It is used to set the mode of Select.
• notFoundContent: It is used to specify the content to show when no result matches.
• open: It is used for the Controlled open state of the dropdown.
• optionFilterProp: It is used to indicate which prop value of the option will be used for a filter if filterOption is set to true.
• optionLabelProp: It is used to indicate which prop value of the option will render as the content of select.
• options: It is used to denote the Select options.
• placeholder: It is used to denote the Placeholder of select.
• removeIcon: It is used to denote the custom remove icon.
• searchValue: It is used to denote the current input search text.
• showArrow: It is used to indicate whether to show the drop-down arrow or not.
• showSearch: It is used to indicate whether to show search input in a single mode or not.
• size: It is used to denote the size of Select input.
• suffixIcon: It is used for the custom suffix icon.
• tagRender: It is used to Customize tag render.
• tokenSeparators: It is the separator that is used to tokenize on the tag and multiple mode.
• value: It is used to denote the currently selected option.
• virtual: It is used to disable virtual scroll when set to false.
• onBlur: It is a called function that is triggered when the component is in a blur state.
• onChange: It is a called function that is triggered when selecting an option or input value change.
• onClear: It is a called function that is triggered when the option is clear.
• onDeselect: It is a called function that is triggered when an option is deselected, param is the selected option’s value.
• onDropdownVisibleChange: It is a called function that is triggered when dropdown open.
• onFocus: It is a called function that is triggered when the component is in focus.
• onInputKeyDown: It is a called function that is triggered when the key pressed.
• onMouseEnter: It is a called function that is triggered when the mouse enters.
• onMouseLeave: It is a called function that is triggered when the mouse leaves.
• onPopupScroll: It is a called function that is triggered when dropdown scrolls.
• onSearch: It is a called function that is triggered when input is changed.
• onSelect: It is a called function that is triggered when an option is selected.

Select Methods:

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

Option Props:

• className: It is used to pass the additional class to option.
• disabled: It is used to disable this option.
• title: It is used to denote the title of Select after select this Option.
• value: It is used to denote the value for the Option.

OptGroup Props:

• key: It is used to denote the group key.
• label: It is used to denote the group label.

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.

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/select/