Getting started with react-select

Getting started with react-select

React Dropdown Select Example Tutorial is the today's leading topic. We use the library called React-select that features dynamic search/filter, async option loading, accessibility, and fast render times. It has a flexible and beautiful Select Input control for ReactJS with multi-select,

React-Select is profoundly easy to use dropdown library exclusively built for React. The react-select library offers powerful multi-select, autocomplete, and AJAX support without any hassle. React-select’s main power lies in its dynamic functionalities such as search, filter, async loading, animated component, easy accessibility, and faster loading time.

Why Should We Use React-select in React?

  • Handles large dataset.
  • CSS styling with emotion support.
  • Simple customization with API support.
  • Managing component state is super easy.
  • Async data loading support.
  • CSS Animation support for components.

    React Dropdown Select Example

In this React tutorial, we will learn to work with React-select library in this tutorial. First, we will set up React JS project, and then inside the React app, we will install the React-select library to show you the React Dropdown select examples.

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

##### or #####

yarn add react-select

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

npm install bootstrap --save

##### or #####

yarn add bootstrap

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

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

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 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 Tutorial with React-select is finished. In this tutorial, we tried to learn how to create an advance dropdown select using the react-select library. I hope you enjoyed this tutorial, please consider it sharing with others.

Further reading:

React Native and Apollo GraphQL Tutorial: Build Mobile Apps

The React Cookbook: Advanced Recipes to Level Up Your Next App

Firebase login functionality from scratch with React + Redux

Breaking Down the Last Monolith

8 Miraculous Ways to Bolster Your React Apps

React.js Firebase Tutorial: Building Firestore CRUD Web Application

Angular vs React vs Vue: Which is the Best Choice for 2019?

A comparison between Angular and React

reactjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

What is ECMAScript and How is it Different From JavaScript?

Many times developers use JavaScript and ECMAScript synonymously for each other. Though they are very closely linked to each other, it does not mean they are the same thing.here is a complete story on the history of JavaScript and how it came into existence. To cut the long story short, ECMA in ECMAScript refers to Europen Computer Manufacturers Association to which JavaScript 1.1 was submitted for standardization back in the year 1997.

Data Types In JavaScript

JavaScript data types are kept easy. While JavaScript data types are mostly similar to other programming languages; some of its data types can be unique. Here, we’ll outline the data types of JavaScript.

Forms of Composition in JavaScript and React

One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos.

JavaScript Memory Management System

The main goal of this article is help to readers to understand that how memory management system performs in JavaScript. I will use a shorthand such as GC which means Garbage Collection. When the browsers use Javascript, they need any memory location to store objects, functions, and all other things. Let’s deep in dive that how things going to work in GC.