React-Select is profoundly easy to use dropdown library exclusively built for React. The react-select library offers powerful multi-select, autocomplete, and AJAX support without any hassle. React-select’s main power lies in its dynamic functionalities such as search, filter, async loading, animated component, easy accessibility, and faster loading time.
In this React tutorial, we will learn to work with React-select library in this tutorial. First, we will set up React JS project, and then inside the React app, we will install the React-select library to show you the React Dropdown select examples.
Run the following command to install React project.
npx create-react-app react-select-tutorial
Get inside the project folder.
cd react-select-tutorial
Run the React project.
npm start
Now, run the following command to install React-Select package via NPM.
npm install react-select --save
##### or #####
yarn add react-select
Install Bootstrap 4 from NPM to use the ready-made UI components.
npm install bootstrap --save
##### or #####
yarn add bootstrap
One the React-select library is installed, we can now import the react-select module in src/App.js
file. Include the following code in App.js file.
import React, { Component } from 'react';
import Select from 'react-select';
import 'bootstrap/dist/css/bootstrap.min.css';
const Countries = [
{ label: "Albania", value: 355 },
{ label: "Argentina", value: 54 },
{ label: "Austria", value: 43 },
{ label: "Cocos Islands", value: 61 },
{ label: "Kuwait", value: 965 },
{ label: "Sweden", value: 46 },
{ label: "Venezuela", value: 58 }
];
class App extends Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-md-3"></div>
<div className="col-md-6">
<Select options={Countries} />
</div>
<div className="col-md-4"></div>
</div>
</div>
);
}
}
export default App
In the above code, we have imported the react-select and Bootstrap 4 modules in the App.js file. We defined a Countries
array and passed the countries name along with their respective country code. We will show these countries name when a user clicks on the React dropdown select element with the help of the react-select library.
We declared the render()
method and passed the HTML code inside of it such as container, row, and column from Bootstrap library to create the basic layout in our React app.
Then, we declared the React select dropdown with the options={...}
object and inside the options tag we passed the Countries array. This will do the magic and render the countries names as you can see in the screenshot above.
React Dropdown Select allows easy customization, you can make the customization with the following properties.
Property | Detail |
---|---|
autofocus | Sets the Focus on control when it is mounted. |
onChange | Triggers change events. |
className | Adds a className on the outer component. |
classNamePrefix | Includes className to the inner elements. |
isDisabled | Sets the control to the disabled state. |
isMulti | Allows multiple value selection. |
value | It is referred to the current value. |
isSearchable | Enable the value search functionality. |
name | Name of the HTML Input (optional – without this, no input will be rendered). |
options | Allows to include options in the select dropdown.. |
onInputChange | Triggers when any value changes in the input. |
placeholder | Show default value when no option is chosen. |
onBlur | Manages blur event on the control. |
You can check out more react-select properties here.
Here we will learn to choose multiple values in a React app using dropdown select element. Check out below how we can use isMulti prop to select various value in a select dropdown.
<Select options={Countries} isMulti />
We can also add the animation on React-select dropdown component, by using the following code.
import React, { Component } from 'react';
import Select from 'react-select';
import makeAnimated from 'react-select/animated';
import 'bootstrap/dist/css/bootstrap.min.css';
const animatedComponents = makeAnimated();
const Countries = [
{ label: "Albania", value: 355 },
{ label: "Argentina", value: 54 },
{ label: "Austria", value: 43 },
{ label: "Cocos Islands", value: 61 },
{ label: "Kuwait", value: 965 },
{ label: "Sweden", value: 46 },
{ label: "Venezuela", value: 58 }
];
class App extends Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-md-3"></div>
<div className="col-md-6">
<Select options={Countries} components={animatedComponents}
isMulti />
</div>
<div className="col-md-4"></div>
</div>
</div>
);
}
}
export default App
Finally, the React Dropdown Select Tutorial with React-select is finished. In this tutorial, we tried to learn how to create an advance dropdown select using the react-select library. I hope you enjoyed this tutorial, please consider it sharing with others.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to Install Python 3.7 on Ubuntu 18.04
Python is one of the most popular progra...Wifi Networks "Device not ready" error solve in Linux
While working on my Ubuntu system,...Laravel 8 - Custom server side search with datatable example
In this article, i will share with you h...Laravel5.4 - Prevent Browser's Back Button Login After Logout
In this tutorials we are sharing with yo...Class 'Form' not found in Laravel 7
In Laravel 5 earlier versions, Laravel F...