Unform

React Select

React Select is the coolest ReactJS custom <select> library.

If you're not using it, we recommend using it instead of using simple <select> elements as it's highly customizable and provides an incredible API as we'll se below.

⚠️ All examples below are using TypeScript. If you're not using it, you can remove all type definitions from the component definition.

Simple select

A simple replacer for default HTML <select> element :)

1import React, { useRef, useEffect } from 'react';
2import ReactSelect, {
3  OptionTypeBase,
4  Props as SelectProps,
5} from 'react-select';
6import { useField } from '@unform/core';
7
8interface Props extends SelectProps<OptionTypeBase> {
9  name: string;
10}
11
12export default function Select({ name, ...rest }: Props) {
13  const selectRef = useRef(null);
14  const { fieldName, defaultValue, registerField, error } = useField(name);
15
16  useEffect(() => {
17    registerField({
18      name: fieldName,
19      ref: selectRef.current,
20      getValue: (ref: any) => {
21        if (rest.isMulti) {
22          if (!ref.state.value) {
23            return [];
24          }
25          return ref.state.value.map((option: OptionTypeBase) => option.value);
26        }
27        if (!ref.state.value) {
28          return '';
29        }
30        return ref.state.value.value;
31      },
32    });
33  }, [fieldName, registerField, rest.isMulti]);
34
35  return (
36    <ReactSelect
37      defaultValue={defaultValue}
38      ref={selectRef}
39      classNamePrefix="react-select"
40      {...rest}
41    />
42  );
43};

Creatable

User can choose between default options or create new ones.

1import React, { useRef, useEffect } from 'react';
2import { OptionTypeBase } from 'react-select';
3import Select, { Props as CreatableProps } from 'react-select/creatable';
4import { useField } from '@unform/core';
5
6interface Props extends CreatableProps<OptionTypeBase> {
7  name: string;
8}
9
10export default function CreatableSelect({ name, ...rest }: Props) {
11  const selectRef = useRef(null);
12  const { fieldName, defaultValue, registerField, error } = useField(name);
13
14  useEffect(() => {
15    registerField({
16      name: fieldName,
17      ref: selectRef.current,
18      getValue: (ref: any) => {
19        if (rest.isMulti) {
20          if (!ref.state.value) {
21            return [];
22          }
23          return ref.state.value.map((option: OptionTypeBase) => option.value);
24        }
25        if (!ref.state.value) {
26          return '';
27        }
28        return ref.state.value.value;
29      },
30    });
31  }, [fieldName, registerField, rest.isMulti]);
32
33  return (
34    <Select
35      defaultValue={defaultValue}
36      ref={selectRef}
37      classNamePrefix="react-select"
38      {...rest}
39    />
40  );
41};

Async

Long lists of options? No problem! Use Async Select to make an asynchronous call to an API everytime user type something in the search box.

1import React, { useRef, useEffect } from 'react';
2import { OptionTypeBase } from 'react-select';
3import Select, { Props as AsyncProps } from 'react-select/async';
4import { useField } from '@unform/core';
5
6interface Props extends AsyncProps<OptionTypeBase> {
7  name: string;
8}
9
10export default function AsyncSelect({ name, ...rest }: Props) {
11  const selectRef = useRef(null);
12  const { fieldName, defaultValue, registerField, error } = useField(name);
13
14  useEffect(() => {
15    registerField({
16      name: fieldName,
17      ref: selectRef.current,
18      getValue: (ref: any) => {
19        if (rest.isMulti) {
20          if (!ref.select.state.value) {
21            return [];
22          }
23
24          return ref.select.state.value.map(
25            (option: OptionTypeBase) => option.value,
26          );
27        }
28        if (!ref.select.state.value) {
29          return '';
30        }
31
32        return ref.select.state.value.value;
33      },
34    });
35  }, [fieldName, registerField, rest.isMulti]);
36
37  return (
38    <Select
39      cacheOptions
40      defaultValue={defaultValue}
41      ref={selectRef}
42      classNamePrefix="react-select"
43      {...rest}
44    />
45  );
46};

Edit this page on GitHub

Unform

React Select

React Select

Simple select

Creatable

Async

File input

React DatePicker

On this page