ReactJS UI Ant Design Select Component

03 Jun, 2021
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 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 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
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 { Select } from 'antd';  const { Option } = Select;  export default function App() {    return (    <div style={{      display: 'block', width: 700, padding: 30    }}>      <h4>ReactJS Ant-Design Select Component</h4>      <>        <Select defaultValue="Monday"          style={{ width: 100 }} >          <Option value="Monday">Monday</Option>          <Option value="Tuesday">Tuesday</Option>          <Option value="Wednesday">Wednesday</Option>          <Option value="Thursday">Thursday</Option>          <Option value="Friday">Friday</Option>          <Option value="Saturday">Saturday</Option>          <Option value="Sunday">Sunday</Option>        </Select>      </>    </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/select/
ReactJS-Ant Design
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to fetch data from an API in ReactJS ?
Axios in React: A Guide for Beginners
How to redirect to another page in ReactJS ?
ReactJS Functional Components
ReactJS setState()
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?