npm package: @n3/react-select
Description: Select components for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.2

# @n3/react-select

Select для для приложений на базе `@n3/kit`.

```javascript
import {
  AsyncCreatable,
  Creatable,
  FilterSelect,
  FilterSelectAjax,
  FilterSelectAsync,
  Select,
  SelectAsync,
  SelectAjax,
} from '@n3/react-select';
```

## Компоненты форм

- `Select` - стилизованный `react-select`
- `SelectAsync` - стилизованный `react-select-async-paginate`
- `SelectAjax` - стилизованный `react-select-fetch`
- `Creatable` - стилизованный `react-select/creatable`
- `AsyncCreatable` - стилизованный `react-select/creatable` + `react-select-async-paginate`

## Компоненты фильтров

- `FilterSelect` - стилизованный `react-select`
- `FilterSelectAjax` - стилизованный `react-select-async-paginate`
- `FilterSelectAsync` - стилизованный `react-select-fetch`

## Props

### Select

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| small |  | boolean | false | Маленькое ли поле |
| isMulti |  | boolean | false | Множественный выбор |
| isClearable |  | boolean | true | Возможность сброса значения |
| hasError |  | boolean | false | Есть ли у поля ошибка |
| hasWarning |  | boolean | false | Есть ли у поля предупреждение |
| value |  | any | null | Значение поля |
| selectRef |  | Ref<any> |  | ref для получения экземпляра react-select |
| modalComponent |  | ComponentType<ModalSelectButtonModalProps> |  | Компонент модального окна<br>@prop {Function} onSelect - функция выбора значения<br>@prop {Function} onCancel - функция закрытия модального окна без изменения значения |
| modalProps |  | { [key: string]: any; } |  | Дополнительные props компонента модального окна |
| isDisabled |  | boolean | false | Выключено ли поле |
| getOptionLabel |  | GetOptionLabel | null | Функция получения заголовка опции для вывода и фильтрации |
| labelKey |  | string | "label" | Ключ, для получения заголовка опции в случае, если не определено getOptionLabel |
| getOptionValue |  | GetOptionValue | null | Функция получения значения опции |
| valueKey |  | string | "value" | Ключ, для получения значения опции в случае, если не определено getOptionValue |
| onChange |  | (nextValue: any) => void | "(): void => {}" | Обработчик изменения значения поля<br>@param nextValue - новое значение поля |
| options | + | OptionsType<any> | GroupedOptionsType<any> |  | Список опций |

### SelectAsync

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| small |  | boolean | false | Маленькое ли поле |
| isMulti |  | boolean | false | Множественный выбор |
| isClearable |  | boolean | true | Возможность сброса значения |
| hasError |  | boolean | false | Есть ли у поля ошибка |
| hasWarning |  | boolean | false | Есть ли у поля предупреждение |
| value |  | any | null | Значение поля |
| selectRef |  | Ref<any> |  | ref для получения экземпляра react-select |
| modalComponent |  | ComponentType<ModalSelectButtonModalProps> |  | Компонент модального окна<br>@prop {Function} onSelect - функция выбора значения<br>@prop {Function} onCancel - функция закрытия модального окна без изменения значения |
| modalProps |  | { [key: string]: any; } |  | Дополнительные props компонента модального окна |
| isDisabled |  | boolean | false | Выключено ли поле |
| getOptionLabel |  | GetOptionLabel | null | Функция получения заголовка опции для вывода и фильтрации |
| labelKey |  | string | "label" | Ключ, для получения заголовка опции в случае, если не определено getOptionLabel |
| getOptionValue |  | GetOptionValue | null | Функция получения значения опции |
| valueKey |  | string | "value" | Ключ, для получения значения опции в случае, если не определено getOptionValue |
| onChange |  | (nextValue: any) => void | "(): void => {}" | Обработчик изменения значения поля<br>@param nextValue - новое значение поля |
| loadOptions |  | LoadOptions<any, any> |  | Асинхронная функция запроса данных с сервера в формате react-select-async-paginate<br>@param search - значение строки поиска<br>@param prevOptions - список загруженных опций<br>@param additional - дополнительные параметры запроса<br>@returns ответ сервера |
| additional |  | any |  | Дополнительные параметры первого запроса |
| debounceTimeout |  | number |  | Задержка при отправке запросов |
| cacheUniqs | + | any[] |  | Список значений при изменении одного из которых опции будут сброшены |

### SelectAjax

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| small |  | boolean | false | Маленькое ли поле |
| isMulti |  | boolean | false | Множественный выбор |
| isClearable |  | boolean | true | Возможность сброса значения |
| hasError |  | boolean | false | Есть ли у поля ошибка |
| hasWarning |  | boolean | false | Есть ли у поля предупреждение |
| value |  | any | null | Значение поля |
| selectRef |  | Ref<any> |  | ref для получения экземпляра react-select |
| modalComponent |  | ComponentType<ModalSelectButtonModalProps> |  | Компонент модального окна<br>@prop {Function} onSelect - функция выбора значения<br>@prop {Function} onCancel - функция закрытия модального окна без изменения значения |
| modalProps |  | { [key: string]: any; } |  | Дополнительные props компонента модального окна |
| isDisabled |  | boolean | false | Выключено ли поле |
| getOptionLabel |  | GetOptionLabel | null | Функция получения заголовка опции для вывода и фильтрации |
| labelKey |  | string | "label" | Ключ, для получения заголовка опции в случае, если не определено getOptionLabel |
| getOptionValue |  | GetOptionValue | null | Функция получения значения опции |
| valueKey |  | string | "value" | Ключ, для получения значения опции в случае, если не определено getOptionValue |
| onChange |  | (nextValue: any) => void | "(): void => {}" | Обработчик изменения значения поля<br>@param nextValue - новое значение поля |
| url | + | string |  | апи-url для запроса данных |
| queryParams |  | { [key: string]: any; } |  | Перманентные параметры запроса |
| searchParamName |  | string |  | Ключ, по которому текст строки поиска будет добавлен к параметрам запроса |
| pageParamName |  | string |  | Ключ, по которому номер текущей страницы будет добавлен к параметрам запроса |
| offsetParamName |  | string |  | Ключ, по которому индекс первой опции для запроса будет добавлен к параметрам запроса |
| mapResponse |  | MapResponse<any> |  | Функция маппинга ответа сервера в формат react-select-async-paginate |
| get |  | Get |  | Асинхронная функция запроса данных с сервера<br>@param url - апи-url<br>@param queryParams - параметры запроса<br>@returns ответ сервера |
| debounceTimeout |  | number |  | Задержка при отправке запросов |
| cacheUniqs | + | any[] |  | Список значений при изменении одного из которых опции будут сброшены |

### Creatable

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| allowCreateWhileLoading |  | boolean |  |  |
| formatCreateLabel |  | (inputValue: string) => ReactNode |  |  |
| isValidNewOption |  | (inputValue: string, value: any, options: OptionsType<any>) => boolean |  |  |
| getNewOptionData |  | (inputValue: string, optionLabel: ReactNode) => any |  |  |
| onCreateOption |  | (inputValue: string) => void |  |  |
| createOptionPosition |  | "first" | "last" |  |  |
| small |  | boolean | false | Маленькое ли поле |
| isMulti |  | boolean | false | Множественный выбор |
| isClearable |  | boolean | true | Возможность сброса значения |
| hasError |  | boolean | false | Есть ли у поля ошибка |
| hasWarning |  | boolean | false | Есть ли у поля предупреждение |
| value |  | any | null | Значение поля |
| selectRef |  | Ref<any> |  | ref для получения экземпляра react-select |
| modalComponent |  | ComponentType<ModalSelectButtonModalProps> |  | Компонент модального окна<br>@prop {Function} onSelect - функция выбора значения<br>@prop {Function} onCancel - функция закрытия модального окна без изменения значения |
| modalProps |  | { [key: string]: any; } |  | Дополнительные props компонента модального окна |
| isDisabled |  | boolean | false | Выключено ли поле |
| getOptionLabel |  | GetOptionLabel | null | Функция получения заголовка опции для вывода и фильтрации |
| labelKey |  | string | "label" | Ключ, для получения заголовка опции в случае, если не определено getOptionLabel |
| getOptionValue |  | GetOptionValue | null | Функция получения значения опции |
| valueKey |  | string | "value" | Ключ, для получения значения опции в случае, если не определено getOptionValue |
| onChange |  | (nextValue: any) => void | "(): void => {}" | Обработчик изменения значения поля<br>@param nextValue - новое значение поля |
| options | + | OptionsType<any> | GroupedOptionsType<any> |  | Список опций |

### AsyncCreatable

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| allowCreateWhileLoading |  | boolean |  |  |
| formatCreateLabel |  | (inputValue: string) => ReactNode |  |  |
| isValidNewOption |  | (inputValue: string, value: any, options: OptionsType<any>) => boolean |  |  |
| getNewOptionData |  | (inputValue: string, optionLabel: ReactNode) => any |  |  |
| onCreateOption |  | (inputValue: string) => void |  |  |
| createOptionPosition |  | "first" | "last" |  |  |
| small |  | boolean | false | Маленькое ли поле |
| isMulti |  | boolean | false | Множественный выбор |
| isClearable |  | boolean | true | Возможность сброса значения |
| hasError |  | boolean | false | Есть ли у поля ошибка |
| hasWarning |  | boolean | false | Есть ли у поля предупреждение |
| value |  | any | null | Значение поля |
| selectRef |  | Ref<any> |  | ref для получения экземпляра react-select |
| modalComponent |  | ComponentType<ModalSelectButtonModalProps> |  | Компонент модального окна<br>@prop {Function} onSelect - функция выбора значения<br>@prop {Function} onCancel - функция закрытия модального окна без изменения значения |
| modalProps |  | { [key: string]: any; } |  | Дополнительные props компонента модального окна |
| isDisabled |  | boolean | false | Выключено ли поле |
| getOptionLabel |  | GetOptionLabel | null | Функция получения заголовка опции для вывода и фильтрации |
| labelKey |  | string | "label" | Ключ, для получения заголовка опции в случае, если не определено getOptionLabel |
| getOptionValue |  | GetOptionValue | null | Функция получения значения опции |
| valueKey |  | string | "value" | Ключ, для получения значения опции в случае, если не определено getOptionValue |
| onChange |  | (nextValue: any) => void | "(): void => {}" | Обработчик изменения значения поля<br>@param nextValue - новое значение поля |
| loadOptions |  | LoadOptions<any, any> |  | Асинхронная функция запроса данных с сервера в формате react-select-async-paginate<br>@param search - значение строки поиска<br>@param prevOptions - список загруженных опций<br>@param additional - дополнительные параметры запроса<br>@returns ответ сервера |
| additional |  | any |  | Дополнительные параметры первого запроса |
| debounceTimeout |  | number |  | Задержка при отправке запросов |
| cacheUniqs | + | any[] |  | Список значений при изменении одного из которых опции будут сброшены |

### FilterSelect

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| small |  | boolean | false | Маленькое ли поле |
| isMulti |  | boolean | false | Множественный выбор |
| isClearable |  | boolean | true | Возможность сброса значения |
| hasError |  | boolean | false | Есть ли у поля ошибка |
| hasWarning |  | boolean | false | Есть ли у поля предупреждение |
| value |  | any | null | Значение поля |
| selectRef |  | Ref<any> |  | ref для получения экземпляра react-select |
| modalComponent |  | ComponentType<ModalSelectButtonModalProps> |  | Компонент модального окна<br>@prop {Function} onSelect - функция выбора значения<br>@prop {Function} onCancel - функция закрытия модального окна без изменения значения |
| modalProps |  | { [key: string]: any; } |  | Дополнительные props компонента модального окна |
| isDisabled |  | boolean | false | Выключено ли поле |
| getOptionLabel |  | GetOptionLabel | null | Функция получения заголовка опции для вывода и фильтрации |
| labelKey |  | string | "label" | Ключ, для получения заголовка опции в случае, если не определено getOptionLabel<br>Ключ для отображения текста поля, работает только в случае, если getOptionLabel не определён |
| getOptionValue |  | GetOptionValue | null | Функция получения значения опции |
| valueKey |  | string | "value" | Ключ, для получения значения опции в случае, если не определено getOptionValue<br>Ключ для нахождения значения поля, работает только в случае, если getOptionValue не определён |
| onChange |  | ((nextValue: any) => void) | ((nextValue: any) => void) | "(): void => {}" | Обработчик изменения значения поля<br>Обработчик изменения значения поля<br>@param nextValue - новое значение поля |
| mainPlaceholder |  | string | "Выберите..." | Плейсхолдер компонента, который всегда отображается |
| options | + | OptionsType<any> | GroupedOptionsType<any> |  | Список опций |

### FilterSelectAjax

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| small |  | boolean | false | Маленькое ли поле |
| isMulti |  | boolean | false | Множественный выбор |
| isClearable |  | boolean | true | Возможность сброса значения |
| hasError |  | boolean | false | Есть ли у поля ошибка |
| hasWarning |  | boolean | false | Есть ли у поля предупреждение |
| value |  | any | null | Значение поля |
| selectRef |  | Ref<any> |  | ref для получения экземпляра react-select |
| modalComponent |  | ComponentType<ModalSelectButtonModalProps> |  | Компонент модального окна<br>@prop {Function} onSelect - функция выбора значения<br>@prop {Function} onCancel - функция закрытия модального окна без изменения значения |
| modalProps |  | { [key: string]: any; } |  | Дополнительные props компонента модального окна |
| isDisabled |  | boolean | false | Выключено ли поле |
| getOptionLabel |  | GetOptionLabel | null | Функция получения заголовка опции для вывода и фильтрации |
| labelKey |  | string | "label" | Ключ, для получения заголовка опции в случае, если не определено getOptionLabel<br>Ключ для отображения текста поля, работает только в случае, если getOptionLabel не определён |
| getOptionValue |  | GetOptionValue | null | Функция получения значения опции |
| valueKey |  | string | "value" | Ключ, для получения значения опции в случае, если не определено getOptionValue<br>Ключ для нахождения значения поля, работает только в случае, если getOptionValue не определён |
| onChange |  | ((nextValue: any) => void) | ((nextValue: any) => void) | "(): void => { }" | Обработчик изменения значения поля<br>Обработчик изменения значения поля<br>@param nextValue - новое значение поля |
| url | + | string |  | апи-url для запроса данных |
| queryParams |  | { [key: string]: any; } |  | Перманентные параметры запроса |
| searchParamName |  | string |  | Ключ, по которому текст строки поиска будет добавлен к параметрам запроса |
| pageParamName |  | string |  | Ключ, по которому номер текущей страницы будет добавлен к параметрам запроса |
| offsetParamName |  | string |  | Ключ, по которому индекс первой опции для запроса будет добавлен к параметрам запроса |
| mapResponse |  | MapResponse<any> |  | Функция маппинга ответа сервера в формат react-select-async-paginate |
| get |  | Get |  | Асинхронная функция запроса данных с сервера<br>@param url - апи-url<br>@param queryParams - параметры запроса<br>@returns ответ сервера |
| debounceTimeout |  | number |  | Задержка при отправке запросов |
| cacheUniqs | + | any[] |  | Список значений при изменении одного из которых опции будут сброшены |
| mainPlaceholder |  | string | "Выберите..." | Плейсхолдер компонента, который всегда отображается |

### FilterSelectAsync

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| small |  | boolean | false | Маленькое ли поле |
| isMulti |  | boolean | false | Множественный выбор |
| isClearable |  | boolean | true | Возможность сброса значения |
| hasError |  | boolean | false | Есть ли у поля ошибка |
| hasWarning |  | boolean | false | Есть ли у поля предупреждение |
| value |  | any | null | Значение поля |
| selectRef |  | Ref<any> |  | ref для получения экземпляра react-select |
| modalComponent |  | ComponentType<ModalSelectButtonModalProps> |  | Компонент модального окна<br>@prop {Function} onSelect - функция выбора значения<br>@prop {Function} onCancel - функция закрытия модального окна без изменения значения |
| modalProps |  | { [key: string]: any; } |  | Дополнительные props компонента модального окна |
| isDisabled |  | boolean | false | Выключено ли поле |
| getOptionLabel |  | GetOptionLabel | null | Функция получения заголовка опции для вывода и фильтрации |
| labelKey |  | string | "label" | Ключ, для получения заголовка опции в случае, если не определено getOptionLabel<br>Ключ для отображения текста поля, работает только в случае, если getOptionLabel не определён |
| getOptionValue |  | GetOptionValue | null | Функция получения значения опции |
| valueKey |  | string | "value" | Ключ, для получения значения опции в случае, если не определено getOptionValue<br>Ключ для нахождения значения поля, работает только в случае, если getOptionValue не определён |
| onChange |  | ((nextValue: any) => void) | ((nextValue: any) => void) | "(): void => {}" | Обработчик изменения значения поля<br>Обработчик изменения значения поля<br>@param nextValue - новое значение поля |
| loadOptions |  | LoadOptions<any, any> |  | Асинхронная функция запроса данных с сервера в формате react-select-async-paginate<br>@param search - значение строки поиска<br>@param prevOptions - список загруженных опций<br>@param additional - дополнительные параметры запроса<br>@returns ответ сервера |
| additional |  | any |  | Дополнительные параметры первого запроса |
| debounceTimeout |  | number |  | Задержка при отправке запросов |
| cacheUniqs | + | any[] |  | Список значений при изменении одного из которых опции будут сброшены |
| mainPlaceholder |  | string | "Выберите..." | Плейсхолдер компонента, который всегда отображается |