React Multiselect Dropdown using React-Select Tutorial

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.

Recommended React JS Tutorials