Custom Dropdown Selectbox Example in React.js

Custom Dropdown Selectbox Example in React.js

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.

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

npx create-react-app dropdown-example

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

Step 2: Install npm dependency

npm install --save react-select

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.

import React from 'react';
import Select from 'react-select';
import './App.css';

const cityList = [
{ label: "New Delhi", value: 1 },
{ label: "Gurgaon", value: 2 },
{ label: "Hyderabad", value: 3 },
{ label: "Bengluru", value: 4 },
{ label: "Pune", value: 5 },
{ label: "Kolkata", value: 6 },
];

function App() {
return (
<div className="container">
<div className="row">
<div className="col-md-4 col-md-offset-4">
<Select placeholder="Select city..." options={ cityList } isMulti/>
</div>
</div>
</div>
);
}

export default App

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 [email protected]. I would love to hear them and If you like this article, share with your friends.

You can download complete code from here. Download Code

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Why ReactJS is better for Web Application Development?

Web Application Development is the point of contact for a business in today's digital era. It is important to choose the right platform for Web Application Development to build a high end Web

ReactJS Development Services | ReactJS Development Company - Chapter 247 Infotech

Chapter 247 Infotech is a leading ReactJS development company in India, USA, offering ReactJS development services at par to a spectrum of business domains from E-commerce, healthcare to Edutech at

Pagination in ReactJs

There are a lot of resourceful materials online that give good insights into pagination in ReactJs, as well as NPM packages you can easily use