ReactJS react-select Library

React-Select is a React-only dropdown library that is incredibly simple to use. The react-select library provides hassle-free multi-select, autocomplete, and AJAX support. We'll go into the cool functionality that react-select v2 has to offer, as well as get on a launchpad to introduce us to react-select v2 and how to get started with it.

What Are the Benefits of Using React-select in React?

• Handles a vast amount of files.
• Emotion assistance in CSS styling.
• API support allows for easy customization.
• Help for asynchronous data loading.
• Components with CSS animation assistance.

Installing react-select in ReactJS

Now that we've covered both of the prerequisites, it's time to apply the react-select kit to our current React framework. We'll be using the build react-app CLI program for this tutorial. To install the React-Select package via NPM, run the following instruction:

$ npm install react-select --save

We import two objects at the top of the App.js module, the react and react-select packages, as seen below.

import React from 'react';
import Select from 'react-select';

We'll be able to use react-select (<Select />) and expand the React.Component class until those two packages are imported.

App.js

//Import React and Select 

const options = [
  { value: 'blues', label: 'Blues' },
  { value: 'rock', label: 'Rock' },
  { value: 'jazz', label: 'Jazz' },
  { value: 'orchestra' label: 'Orchestra' } 
];

class App extends React.Component {
  render(){
    return (
      <Select options = {options} />
    );
  }
}

export default App;

When we run this code snippet, we can see a select feature that stretches from one end of the screen to the other.

We'll look at how to style the select component in the following sections to expand its functionality and make it more appealing to the eye.

Customize your select components

Now, We've successfully created the basic select component, for the next part let's add some aesthetics to our select components. First and foremost, we'll use bootstrap CSS to resize our select part so that it doesn't fill the whole width of the tab. In our project, we'll install bootstrap as follows:

$ npm install bootstrap@4.31

App.js

import 'bootstrap/dist/css/bootstrap.css';
//Import react and select 

return(
  <Select className="mt-4 col-md-8 col-offset-4"
    options = { options }
  />
);

By adding the above code snippet, our select element will look like this:

To go into more detail, we'll change the look and feel of the selected component:

const customStyles = {
  option: (provided, state) => ({
    ...provided,
    borderBottom: '2px dotted green',
    color: state.isSelected ? 'yellow' : 'black',
    backgroundColor: state.isSelected ? 'green' : 'white'
  }),
  control: (provided) => ({
    ...provided,
    marginTop: "5%",
  })
}

...

return(
  <Select className="col-md-8 col-offset-4"
    styles = { customStyles }
    options = { options }
  />
);

By the above customization, our element sure does look more appealing.

React Animated Multi-select dropdown

Little animation always makes the user interface more beautiful and more appealing to the user along with being responsive. To apply animation to our select component, we simply need to import the animated component, which is called makeAnimated in this case, and then reference makeAnimated in our component's props as follows:

App.js

import React from 'react';
import Select, { components } from 'react-select';
import makeAnimated from 'react-select/lib/animated';
import 'bootstrap/dist/css/bootstrap.css';

const colourOptions = [] //our array of colours

class App extends React.Component {
  render(){
    return (
      <Select
        className="mt-4 col-md-6 col-offset-4"
        components={makeAnimated()}
        isMulti
        options={colourOptions}
        />
    );
  }
}

export default App;

Running the above code snippet let us as seen in the gif below, you can pick several options at once:

Conclusion

Here comes the end of this tutorial, and congratulations on learning a new concept that will make react app more functional as we learned how to get started with the react-select component, as well as how to expand some of the predefined modules to meet our needs. The react-select kit contains a plethora of functionalities, some of which will meet your needs and others of which you will need to tailor to suit your use case.