React Multi-Select Dropdown using React-select example; In this example,i am going to show you through this example; how to create multi-select dropdown in react application using the npm react-select.
The react-select library is an easy-to-use dropdown library built specifically for React. The react-select library provides multi-select, autocomplete, and AJAX support without any hassle. The main strength of react-select library is dynamic functionalities like search, filter, async loading, animated components, easy access, and fast loading times. And also the properties of React-Select library are also explained in this tutorial.
Multiselect dropdown in react js app tutorial; i will create multiselect countries dropdown in angular app using react-select and i will show you it’s properites.
Multiselect Dropdown in React using React-select
- Step 1 – Create New React App
- Step 2 – Install React-Select and Bootstrap 4
- Step 3 – Create Multi-Select Dropdown Component
- Step 4 – Import Component in App.js
Step 1 – Create New React App
Execute the following command on your terminal to create a new react app:
npx create-react-app my-react-app
To run the React app, execute the following command on your terminal:
npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install React-Select and Bootstrap 4
Execute the following command to install select and bootstrap 4 libraries into your react app:
npm install bootstrap --save npm install react-select
Add bootstrap.min.css file in src/App.js
file:
import React, { Component } from 'react' import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; function App() { return ( <div> <h2>How to Create Multi-Select Dropdown in React Example</h2> </div> ); } export default App;
Step 3 – Create Multi-Select Dropdown Component
To use the isMulti prop to select different values in a select dropdown:
<Select options={Countries} isMulti />
So, go to src directory of your react js app and create a multi-select dropdown form component named MultiSelectDropdown.js. And add the following code into it:
import React, { Component } from 'react'; import Select from 'react-select'; import makeAnimated from 'react-select/animated'; 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 MultiSelectDropdown 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 MultiSelectDropdown;
Step 4 – Import Component in App.js
Import MultiSelectDropdown.js file in src/App.js
file:
import React from 'react'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; import MultiSelectDropdown from './MultiSelectDropdown' function App() { return ( <div className="App"> <MultiSelectDropdown /> </div> ); } export default App;
Conclusion
React Multi-Select Dropdown using react-select example; In this example tutorial, you have learned from scratch how to integrate multi-select dropdown using react-select in react application.
Overview React-Select Library Properties
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.