How to Create Animated Multi-Select Dropdown in React

Last Updated on by in React JS Tutorial
Select dropdown is a majestic user-interface element that allows users to choose a single option from a list by clicking on it. What if I told you to select multiple values from the drop-down list? Your answer will probably be no; fret not.

In this step-by-step guide, we will teach you how to create an animated multi-select dropdown component in React application using the react-select package.

A multi-select dropdown allows users to select multiple values from the options list, after adding CSS animations, It works smoothly and gives a sense of calmness, resulting in a captivating user experience.

React-Select is a user-friendly JavaScript library responsible for the creation of feature-rich and customizable animated select drop-downs and multi-select drop-downs in React. By using this magical plugin, you can convert a simple select dropdown to an advanced select dropdown that handles large datasets, gives ease of customization, supports Async data loading, supports custom CSS styling and alluring CSS animation.

Let’s embark on a front-end journey and find out how to build a select dropdown component that supports, eye-catching animation and multi value selection.

React App Set Up

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

Install React-Select Library

Now, run the following command to install React-Select package via NPM.

npm install react-select --legacy-peer-deps

Install Bootstrap from NPM to use the ready-made UI components.

npm install bootstrap --legacy-peer-deps

Import React-Select Library

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

React Dropdown Select Tutorial with React-select

In the above code, we have imported the react-select and Bootstrap 5modules 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.

Overview React-Select 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.

React Multi Select Dropdown

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 />

React Multi Select Dropdown

React Animated Multi Select Component

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

Conclusion

Finally, the React Dropdown Select example is finished. In this tutorial, we comprehended how to create an advance dropdown select using the react-select library that supports CSS animations and multi values selection.

If you want to explore more about features, and methods of react-select, make sure to check out their official documentation.

Git Repo

❤️ Checkout Popular CSS Collection

Digamber - Author positronX.io

Digamber, the founder of PositronX, is a certified web developer with over 10 years of experience. He possesses a curiosity for learning new things and enjoys playing cricket on his days off.