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.

PropertyDetail
autofocusSets the Focus on control when it is mounted.
onChangeTriggers change events.
classNameAdds a className on the outer component.
classNamePrefixIncludes className to the inner elements.
isDisabledSets the control to the disabled state.
isMultiAllows multiple value selection.
valueIt is referred to the current value.
isSearchableEnable the value search functionality.
nameName of the HTML Input (optional – without this, no input will be rendered).
optionsAllows to include options in the select dropdown..
onInputChangeTriggers when any value changes in the input.
placeholderShow default value when no option is chosen.
onBlurManages blur event on the control.

You can check out more react-select properties here.

Recommended React JS Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published.