react-select

Introduction

Often we come across the aspects while working on a web project that turns things difficult to implement while using normal components in react especially when UI/UX is of high concern. Therefore, building the elements becomes difficult followed by not-so-good UI/UX. In this kind of situation, we use select elements in react to build things easier for our web project.

Additionally, at some point in time, we may have to reconsider the features like styling and focus, fetching data from the remote source and this list has no end. This problem is easily solved using react select.

What is react-select?

React select is a component that represents a whole new different paradigm of developing healthy and powerful react components while being extremely customizable. The approach is quite easy to understand to implement.

Features of react- select

It can include the following features as listed below:

Highly controlled modular architecture and props.
Complete control of UI components through API Injection Component.
Expressive emotion styling with API.
Broad and customizable function with flexible data approach.
Functional components adaptability like animation, group, portal-support with requests.

The select component in react is highly adaptive. It integrated collectively through its components while being exceptionally modifiable. Moreover, the usage of function along with the flexible data approach lets us broaden the varied functional components be it a request module or animation.

Lets us now discuss how you can import the react-select component into your web project. The below commands would serve the purpose for the same.

Usage and Installation

Prerequisites

Familiar with yarn or node npm package module
Create react app tool pre-installed.
Basic knowledge of HTML/CSS and Javascript(ES6).
Basic understanding of command-line terminal.

To install a select component into your project, we need to type the following command depending on what package module you are using.

The above commands will create a react app with all the modules. You can now see the usage of select component as shown below.

import React, { Component } from 'react'
import Select from 'react-select'

const options = 
[
  { value: 'car', label: 'Car' },
  { value: 'bike', label: 'Bike' },
  { value: 'truck', label: 'Truck' }
]

const MyComponent = () => (
  <Select options={options} />
)

With the above imported packages, we will now be able to access the react-select component from the respective yarn or node npm module. Although, in prior HTML we might have used <select> to warehouse multiple optional tags. These tags will be replaced by the react-select components and hence the values will be passed as props to your main file.

Additionally, you can also import custom styling components and states to your react-select component. It can be done by using the below snippet as shown.

//App.js

import React from 'react';
import chroma from 'chroma-js';

import { colourOptions } from '../data';
import Select from 'react-select';

const dota = (color = '#fff') => ({
  alignItems: 'left',
  display: 'flex',

  ':before': {
    backgroundColor: color,
    borderRadius: 20,
    content: '" "',
    display: 'content',
    marginRight: 4,
    height: 20,
    width: 10,
  },
});

In the above code, we have configured the type of element that will be imported into our directory from the react module and the select module would import customized components for the respective associated states and styles.

There are plenty of other concepts associated with react-select which are important to be known. To name a few, one of the components named 'Async' is important using the following command.

Consider an example of using Async with select component as shown below.

import Async from 'react-select/lib/Async';

import React, { Component } from 'react';

import AsyncSelect from 'react-select/async';
import { colourOptions } from '../data';

type State = {
  inputValue: string,
};

const filterColors = (inputValue: string) => {
  return colourOptions.filter(i =>
    i.label.toLowerCase().includes(inputValue.toLowerCase())
  );
};

const loadOptions = (inputValue, callback) => {
  setTimeout(() => {
    callback(filterColors(inputValue));
  }, 1000);
};

export default class WithCallbacks extends Component<*, State> {
  state = { inputValue: '' };
  handleInputChange = (newValue: string) => {
    const inputValue = newValue.replace(/\W/g, '');
    this.setState({ inputValue });
    return inputValue;
  };
  render() {
    return (
      <div>
        <pre>inputValue: "{this.state.inputValue}"</pre>
        <AsyncSelect
          cacheOptions
          loadOptions={loadOptions}
          defaultOptions
          onInputChange={this.handleInputChange}
        />
      </div>
    );
  }
}

This component is fruitful when we want to request our select values from the database or the API that we might be using. The Async component lets you define properties to the select component which comes with helper props, cache, and input change option. It is bootstrapped within the package and can be easily implemented using the function callbacks and promises.

Additionally, fixed components can also be used to make possible the options which can't be removed because they have been already selected.

Conclusion

In this article, we came across most of the common usages associated with a react-select component, how to install it and how to extend its defined properties along with custom styling and state changes. We also came across the predefined components that are primarily used when you have to use less space for your web project. Also, we have discussed how the other components associated with react-select come in handy which will always fit our needs. There are still a whole lot of concepts to learn about the select components since it is a plethora of various use cases you can come across in your web projects

Next TopicCloud disaster recovery

← prev next →