React select

In this article, we’re going to look at the react-select component. This is a select input React component with rich functionality. You can use it in your projects when the functionality of a standard select control is not enough. React select allows to select single or multiple values, search for available options, load options asynchronously, and apply different styles to a component.

Adding react-select to project#

We will start by adding the react-select npm package to a project:

After that, we can import the Select React component and use it in our application:

The basic usage scenario is very similar to the standard <select> React component. We specify available options with the options property, the currently selected option with value, and handle the onChange event to track selection changes.

It is more advanced scenarios, where the react-select component starts to shine. Let's take a look at some of them.

Selecting multiple values#

We can allow selecting multiple values using the isMulti property of the component:

Getting data asynchronously#

A common scenario is when you need to retrieve options for your select input from a server. During a request processing, we'd like to indicate to a user that data is being loaded.

The react-select supports this scenario with the Async component. This component provides the loadOptions property that is used to define a function responsible for a data load.

In this example, we use the select component imported from the react-select/async. Options for a select input got requested asynchronously on a component load and every time a user types in something. We're using the setTimeout function here to emulate a call to a server. The loadOptions function receives the current value of the input and returns a Promise that will be resolved with options.

The defaultOptions property for the component specifies that the loadOptions function should be called during an initial load (the input value will be an empty string in this case). This way, we can pre-load available options.

Styling components#

If you need to change the look of the react-select component, there are several ways to do that. You can use the styles property of the component, CSS class names, and by defining a theme among the options.

Let's look at how we can style the react-select with the styles property. This property of the select component expects an object with a set of fields. Names of fields are predefined and correspond to different parts of the component (full list is available in the official guide). For each predefined key, we can specify a function that receives default styles and additional data as arguments. The function should return a new style object for a component. This way, we can separately define custom styles for different components of the select input: dropdown menu options, separator, selected option, placeholoder and so on.

In this example we define a custom styles object that we pass to the select component. In this object we define custom styles for dropdown options with the options field and for a selected value with the singleValue field.

For options we receive two arguments in a handler function: provided contains default styles and state contains additional information about the current element. This information includes a link to a current option's data with the state.data value, the current state of the option's selection such as isSelected or isFocused, and also access to additional properties specified for the react-select component with the state.selectProps value. In this function, we return all default styles with ...provided except for custom font weight, color, background color, and font size.

The same approach is used to define a custom style for a selected option. For the color property we're using the constant variable, for the font weight we're using the isSelected state, for the background color we're using the data value which contains an object for an option (we've added the color property to the object), and for the fontSize we're using a custom selectProps.myFontSize value that we've provided to the Select component.

Using custom components#

It is also possible to define a custom rendering component for various parts of the select component. This can be done by providing custom components as properties for the react-select component:

In this example, we import components from the react-select to be able to override the default rendering components. We've specified that the SingleValue component should be used to render the selected option. During the render, this component will get the option's value with the getValue function provided through properties and will display an additional symbol next to the selected option's label. We can override the rendering components for other parts of the react-select as well.

Summary#

In this article we've seen how you can use the react-select component in your project. This component provides a rich select input control with lots of options.