React Select reference

What is React Select?

React Select is a JavaScript library that provides a flexible React select widget. It includes support for multiselect, autocomplete, asynchronous loading of options, and the ability to create options on the fly.

Select props

options

Array of Option objects that provide the options for the select widget. Option can have any interface.

defaultValue

The default value of the select widget. Must be one of:

• Option (if single select)
• Option[] (if multi-select)
• null (if there is no default value)

value

The current value of the select widget. Must be either:

• Option (if single select)
• Array of Option objects (if multi-select)
• null (if there’s no value)

getOptionLabel

Function that must resolve an instance of Option to a string to be displayed as the label for the select option. It’s up to you to choose what property of your Option object will be used as the label.

getOptionValue

Function that must resolve an instance of Option to a string to be used as the value for the select option. This is the value that will be used for the underlying <select> element when the form is submitted. Typically, you’d use the ID of entities as the value (e.g., customer ID, user ID, article ID, etc).

onChange

Function that handles change events on the select. The function signature is:

(
  newValue: OnChangeValue<Option, IsMulti>,   
  actionMeta: ActionMeta<Option>
) => void;

Typically, you use the newValue to update the part of your state that keeps track of form values. For example, if you’re using a form library like Formik, you’d pass newValue to setValue.

Recipes

Render custom option label

<Select
   name="color"
   options={colourOptions}
   formatOptionLabel={(option, { context }) => {
     /* context can be either `menu` or `value`
        menu - dropdown
        value - value displayed
     */
     return context === 'menu' ? option.label : option. Color;
   }}
/>

Sources

• React Select official website