This tutorial help to
create dropdown list using react 16. We will create select option and get selected item using reactjs. The drop-down menu is a menu that offers a list of options. The end user can select one of the options and to do operation based on selected item.
There are third-party library like
react-select to create dropdown list, OR You can create a custom dropdown menu component in React.
Let’s create react select list using React-select library. This libs has features like search/filter items, ajax operation etc.
Normally, we can create html5 dropdown list as follow, I am using bootstrap libs for css.
React-select library has features dynamic search/filter, async option loading, accessibility, and fast render times. It has a flexible and beautiful Select Input control for ReactJS with multi-select, autocomplete, and ajax support.
It has the following features:
- Flexible approach to data, with customizable functions
- Extensible styling API with emotion
- Component Injection API for complete control over the UI behavior
- Controllable state props and modular architecture
- Long-requested features like option groups, portal support, animation, and more
Install React and other libraries
Let’s create simple react app using npx-
npx create-react-app reaselect-poc
Now, go inside the project folder.
install React-Select v2
React-Select v2, Add the react-select package using the following command.
Install Bootstrap 4
install Bootstrap 4 using the following command.
yarn add bootstrap
npm install bootstrap -save
Import the react-select module
src/App.js file, add the following code.
We have created an actions array that contains the data that needs to be displayed on the dropdown. There are following properties are available.
autoFocus- focus the control when it mounts
className- apply a className to the control
classNamePrefix- apply classNames to inner elements with the given prefix
isDisabled- disable the control
isMulti- allow the user to select multiple values
isSearchable- allow the user to search for matching options
name- generate an HTML input with this name, containing the current value
onChange- subscribe to change events
options- specify the options the user can select from
placeholder- change the text displayed when no option is selected
value- control the current value
React-select exposes two public methods:
focus()- focus the control programmatically
blur()- blur the control programmatically
You can control the following props by providing values for them. If you don’t,
react-select will manage them for you.
onChange- specify the current value of the control
onMenuClose- control whether the menu is open
onInputChange- control the value of the search input (changing this will update the available options)
Originally published at https://www.js-tutorials.com on March 9, 2021.