In this article, we’re going to look at the 

 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. 

 allows to select single or multiple values, search for available options, load options asynchronously, and apply different styles to a component.

# add with npm
npm install react-select
# or with yarn
yarn add react-select

 React component and use it in our application:

import React from "react";
import ReactDOM from "react-dom";

import Select from "react-select";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = { selectedOption: "" };
  }

  options = [
    { value: "Spring", label: "Spring" },
    { value: "Summer", label: "Summer" },
    { value: "Autumn", label: "Autumn" },
    { value: "Winter", label: "Winter" }
  ];

  handleChange = selectedOption => {
    this.setState({ selectedOption });
  };

  render() {
    return (
      <Select
        value={this.state.selectedOption}
        onChange={this.handleChange}
        options={this.options}
      />
    );
  }
}

The basic usage scenario is very similar to the standard 

 React component. We specify available options with the 

 property, the currently selected option with 

It is more advanced scenarios, where the 

 component starts to shine. Let's take a look at some of them.

We can allow selecting multiple values using the 

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 

 property that is used to define a function responsible for a data load.

import React from "react";
import ReactDOM from "react-dom";

import AsyncSelect from "react-select/async";

class MyComponent extends React.Component {
  options = [
    { value: "Spring", label: "Spring" },
    { value: "Summer", label: "Summer" },
    { value: "Autumn", label: "Autumn" },
    { value: "Winter", label: "Winter" }
  ];

  loadOptions = inputValue => {
    return new Promise((resolve, reject) => {
      // using setTimeout to emulate a call to server
      setTimeout(() => {
        resolve(this.filter(inputValue));
      }, 2000);
    });
  };

  filter = inputValue =>
    this.options.filter(option =>
      option.label.toLowerCase().includes(inputValue.toLowerCase())
    );

  render() {
    return (
      <AsyncSelect
        defaultOptions
        cacheOptions
        loadOptions={this.loadOptions}
      />
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById("app"));

In this example, we use the select component imported from the 

.  Options for a select input got requested asynchronously on a component load and every time a user types in something. We're using the 

 function here to emulate a call to a server. The 

 function receives the current value of the input and returns a Promise that will be resolved with options.

 property for the  component specifies that the 

 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.

 component, there are several ways to do that. You can use the 

 property of the component, CSS class names, and by defining a theme among the options.

 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 

 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.

import React from "react";
import ReactDOM from "react-dom";

import Select from "react-select";

class MyComponent extends React.Component {
  options = [
    { value: "Spring", label: "Spring", color: "#498205" },
    { value: "Summer", label: "Summer", color: "#c19c00" },
    { value: "Autumn", label: "Autumn", color: "#da3b01" },
    { value: "Winter", label: "Winter", color: "#004e8c" }
  ];

  styles = {
    option: (provided, state) => ({
      ...provided,
      fontWeight: state.isSelected ? "bold" : "normal",
      color: "white",
      backgroundColor: state.data.color,
      fontSize: state.selectProps.myFontSize
    }),
    singleValue: (provided, state) => ({
      ...provided,
      color: state.data.color,
      fontSize: state.selectProps.myFontSize
    })
  };

  render() {
    return (
      <Select
        myFontSize="20px"
        styles={this.styles}
        options={this.options}
      />
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById("app"));

 object that we pass to the select component. In this object we define custom styles for dropdown options with the 

 field and for a selected value with the 

For options we receive two arguments in a handler function: 

 contains additional information about the current element. This information includes a link to a current option's data with the 

 value, the current state of the option's selection such as 

, and also access to additional properties specified for the 

 value. In this function, we return all default styles with 

 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 

 state, for the background color we're using the 

 value which contains an object for an option (we've added the 

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 

import React from "react";
import ReactDOM from "react-dom";

import Select, { components } from "react-select";

const SingleValue = ({ children, ...props }) => (
  <components.SingleValue {...props}>
    <span>{props.getValue()[0].symbol} </span>
    {children}
  </components.SingleValue>
);

class MyComponent extends React.Component {
  options = [
    { value: "Spring", label: "Spring", symbol: "🌱" },
    { value: "Summer", label: "Summer", symbol: "🌞" },
    { value: "Autumn", label: "Autumn", symbol: "🍂" },
    { value: "Winter", label: "Winter", symbol: "⛄" }
  ];

  render() {
    return <Select options={this.options} components={{ SingleValue }} />;
  }
}

ReactDOM.render(<MyComponent />, document.getElementById("app"));

 to be able to override the default rendering components. We've specified that the 

 component should be used to render the selected option. During the render, this component will get the option's value with the 

 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 

In this article we've seen how you can use the 

 component in your project. This component provides a rich select input control with lots of options.

<h1 data-node-type="titlePlaceholder">React select</h1><p>In this article, we’re going to look at the <a href="https://react-select.com/" rel="noopener noreferrer nofollow">react-select</a> 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. <a href="https://react-select.com/" rel="noopener noreferrer nofollow">React select</a> allows to select single or multiple values, search for available options, load options asynchronously, and apply different styles to a component.</p><h2>Adding react-select to project</h2><p>We will start by adding the <code>react-select</code> npm package to a project:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-QnBw0" id="cm-QnBw0"># add with npm
npm install react-select
# or with yarn
yarn add react-select</textarea><p>After that, we can import the <code>Select</code> React component and use it in our application:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-MfXMk" id="cm-MfXMk">import React from "react";
import ReactDOM from "react-dom";

import Select from "react-select";

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = { selectedOption: "" };
  }

  options = [
    { value: "Spring", label: "Spring" },
    { value: "Summer", label: "Summer" },
    { value: "Autumn", label: "Autumn" },
    { value: "Winter", label: "Winter" }
  ];

  handleChange = selectedOption =&gt; {
    this.setState({ selectedOption });
  };

  render() {
    return (
      &lt;Select
        value={this.state.selectedOption}
        onChange={this.handleChange}
        options={this.options}
      /&gt;
    );
  }
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fdkwmn&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fdkwmn&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fdkwmn%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>The basic usage scenario is very similar to the standard <code>&lt;select&gt;</code> React component. We specify available options with the <code>options</code> property, the currently selected option with <code>value</code>, and handle the <code>onChange</code> event to track selection changes.</p><p>It is more advanced scenarios, where the <code>react-select</code> component starts to shine. Let's take a look at some of them.</p><h2>Selecting multiple values</h2><p>We can allow selecting multiple values using the <code>isMulti</code> property of the component:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-081Ao" id="cm-081Ao">&lt;Select
  isMulti
  value={this.state.selectedOption}
  onChange={this.handleChange}
  options={this.options}
/&gt;</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Ffc0eh&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Ffc0eh&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Ffc0eh%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><h2>Getting data asynchronously</h2><p>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.</p><p>The react-select supports this scenario with the <code>Async</code> component. This component provides the <code>loadOptions</code> property that is used to define a function responsible for a data load.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-HcEX0" id="cm-HcEX0">import React from "react";
import ReactDOM from "react-dom";

import AsyncSelect from "react-select/async";

class MyComponent extends React.Component {
  options = [
    { value: "Spring", label: "Spring" },
    { value: "Summer", label: "Summer" },
    { value: "Autumn", label: "Autumn" },
    { value: "Winter", label: "Winter" }
  ];

  loadOptions = inputValue =&gt; {
    return new Promise((resolve, reject) =&gt; {
      // using setTimeout to emulate a call to server
      setTimeout(() =&gt; {
        resolve(this.filter(inputValue));
      }, 2000);
    });
  };

  filter = inputValue =&gt;
    this.options.filter(option =&gt;
      option.label.toLowerCase().includes(inputValue.toLowerCase())
    );

  render() {
    return (
      &lt;AsyncSelect
        defaultOptions
        cacheOptions
        loadOptions={this.loadOptions}
      /&gt;
    );
  }
}

ReactDOM.render(&lt;MyComponent /&gt;, document.getElementById("app"));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fcodesandbox.io%2Fs%2F1ti5m&amp;src=https%3A%2F%2Fcodesandbox.io%2Fembed%2F1ti5m&amp;type=text%2Fhtml&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In this example, we use the select component imported from the <code>react-select/async</code>.  Options for a select input got requested asynchronously on a component load and every time a user types in something. We're using the <code>setTimeout</code> function here to emulate a call to a server. The <code>loadOptions</code> function receives the current value of the input and returns a Promise that will be resolved with options.</p><p>The <code>defaultOptions</code> property for the  component specifies that the <code>loadOptions</code> 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.</p><h2>Styling components</h2><p>If you need to change the look of the <code>react-select</code> component, there are several ways to do that. You can use the <code>styles</code> property of the component, CSS class names, and by defining a theme among the options.</p><p>Let's look at how we can style the <code>react-select</code> with the <code>styles</code> 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 <a href="https://react-select.com/styles#style-object" rel="noopener noreferrer nofollow">official guide).</a> 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.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-7LIxb" id="cm-7LIxb">import React from "react";
import ReactDOM from "react-dom";

import Select from "react-select";

class MyComponent extends React.Component {
  options = [
    { value: "Spring", label: "Spring", color: "#498205" },
    { value: "Summer", label: "Summer", color: "#c19c00" },
    { value: "Autumn", label: "Autumn", color: "#da3b01" },
    { value: "Winter", label: "Winter", color: "#004e8c" }
  ];

  styles = {
    option: (provided, state) =&gt; ({
      ...provided,
      fontWeight: state.isSelected ? "bold" : "normal",
      color: "white",
      backgroundColor: state.data.color,
      fontSize: state.selectProps.myFontSize
    }),
    singleValue: (provided, state) =&gt; ({
      ...provided,
      color: state.data.color,
      fontSize: state.selectProps.myFontSize
    })
  };

  render() {
    return (
      &lt;Select
        myFontSize="20px"
        styles={this.styles}
        options={this.options}
      /&gt;
    );
  }
}

ReactDOM.render(&lt;MyComponent /&gt;, document.getElementById("app"));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fchy20&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fchy20&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fchy20%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In this example we define a custom <code>styles</code> object that we pass to the select component. In this object we define custom styles for dropdown options with the <code>options</code> field and for a selected value with the <code>singleValue</code> field.</p><p>For options we receive two arguments in a handler function: <code>provided</code> contains default styles and <code>state</code> contains additional information about the current element. This information includes a link to a current option's data with the <code>state.data</code> value, the current state of the option's selection such as <code>isSelected</code> or <code>isFocused</code>, and also access to additional properties specified for the <code>react-select</code> component with the <code>state.selectProps</code> value. In this function, we return all default styles with <code>...provided</code> except for custom font weight, color, background color, and font size. </p><p>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 <code>isSelected</code> state, for the background color we're using the <code>data</code> value which contains an object for an option (we've added the <code>color</code> property to the object), and for the <code>fontSize</code> we're using a custom <code>selectProps.myFontSize</code> value that we've provided to the <code>Select</code> component.</p><h2>Using custom components</h2><p>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 <code>react-select</code> component:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-f8bdh" id="cm-f8bdh">import React from "react";
import ReactDOM from "react-dom";

import Select, { components } from "react-select";

const SingleValue = ({ children, ...props }) =&gt; (
  &lt;components.SingleValue {...props}&gt;
    &lt;span&gt;{props.getValue()[0].symbol} &lt;/span&gt;
    {children}
  &lt;/components.SingleValue&gt;
);

class MyComponent extends React.Component {
  options = [
    { value: "Spring", label: "Spring", symbol: "🌱" },
    { value: "Summer", label: "Summer", symbol: "🌞" },
    { value: "Autumn", label: "Autumn", symbol: "🍂" },
    { value: "Winter", label: "Winter", symbol: "⛄" }
  ];

  render() {
    return &lt;Select options={this.options} components={{ SingleValue }} /&gt;;
  }
}

ReactDOM.render(&lt;MyComponent /&gt;, document.getElementById("app"));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fegnqy&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fegnqy&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fegnqy%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In this example, we import <code>components</code> from the <code>react-select</code> to be able to override the default rendering components. We've specified that the <code>SingleValue</code> component should be used to render the selected option. During the render, this component will get the option's value with the <code>getValue</code> 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 <code>react-select</code> as well.</p><h2>Summary</h2><p>In this article we've seen how you can use the <code>react-select</code> component in your project. This component provides a rich select input control with lots of options.</p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

React select

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript