React Multi Select Dropdown using React-Select Example

React Multi Select Dropdown using React-Select Example

React Multi-Select Dropdown using React-select example; In this example, you will learn from scratch how to create multi-select dropdown in react application using the npm react-select.

If you want to create multiple select dropdown in react js app. So that your visitors can select multiple options at a time from select dropdown into your react js app. So, this tutorial will guide you step by step on how to implement multi select dropdown in react js app using 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.

This example tutorial will create multi select dropdown. And this dropdown contains the list of countries. In which multiple countries can be selected simultaneously.

React Dropdown Multi Select Example using React-select

Just follow the following steps and how to create multi-select dropdown in react js app:

  • Step 1 – Create New React App
  • Step 2 – Install React-Select and Bootstrap 4
  • Step 3 – Create Multi-Select Dropdown Component
  • Step 4 – Add Component in App.js

Step 1 – Create New React App

In this step, open your terminal and 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

In this step, 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 />

Now, visit the 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 – Add Component in App.js

In this step, you need to add 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 Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published.