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 therequiredmodule using the following command:
npm install antd
Project Structure: It will look like the following.
