Custom Dropdown Selectbox Example in React.js

In many times we need to customize the input fields in the forms of our application. While we talk about javascript frameworks then now a days there are so many npm packages available which make the customization task easy for the developers.

In this article today, I will explain you to customize the dropdown input field in react.js application. For the required task we will use react-select npm package here.

Let's Get Started

Step 1: create react app

Once above command run successfully, move to the React.js project folder.

Step 2: Install npm dependency

Step 3: Update App.js file

import npm library in App.js and update the file for achieving the task. Open the App.js file and put the below code in it.

In the above file, At the top we have imported the need libraries. Below that we have created static list of city to show the city list in dropdown input field. And at below we have binded the data with html.

With the current npm library we have used above, We can use many other customizations. Have a look below the other options available with this npm package. 

• 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

Controllable Props

We can control the following props by providing values for them. 

• value / onChange - specify the current value of the control
• menuIsOpen / onMenuOpen / onMenuClose - control whether the menu is open
• inputValue / onInputChange - control the value of the search input (changing this will update the available options)

If you don't provide these props, you can set the initial value of the state they control:

• defaultValue - set the initial value of the control
• defaultMenuIsOpen - set the initial open value of the menu
• defaultInputValue - set the initial value of the search input

Methods

React-select npm package also exposes two public methods:

• focus() - focus the control programmatically
• blur() - blur the control programmatically

Conclusion

So in this demo, We learned to customize the dropdown field in React.js application. You can find other react.js sample projects here.

That’s all for now. Thank you for reading and I hope this demo will be very helpful to customize the dropdown field in React.js application.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.