@n3/react-select

Select components for react applications based on @n3/kit

Usage no npm install needed!

<script type="module">
  import n3ReactSelect from 'https://cdn.skypack.dev/@n3/react-select';
</script>

README

@n3/react-select

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

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 ref для получения экземпляра react-select
modalComponent ComponentType Компонент модального окна
@prop {Function} onSelect - функция выбора значения
@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 => {}" Обработчик изменения значения поля
@param nextValue - новое значение поля
options + OptionsType GroupedOptionsType

SelectAsync

Название Обязательность Тип Значение по умолчанию Описание
small boolean false Маленькое ли поле
isMulti boolean false Множественный выбор
isClearable boolean true Возможность сброса значения
hasError boolean false Есть ли у поля ошибка
hasWarning boolean false Есть ли у поля предупреждение
value any null Значение поля
selectRef Ref ref для получения экземпляра react-select
modalComponent ComponentType Компонент модального окна
@prop {Function} onSelect - функция выбора значения
@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 => {}" Обработчик изменения значения поля
@param nextValue - новое значение поля
loadOptions LoadOptions<any, any> Асинхронная функция запроса данных с сервера в формате react-select-async-paginate
@param search - значение строки поиска
@param prevOptions - список загруженных опций
@param additional - дополнительные параметры запроса
@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 ref для получения экземпляра react-select
modalComponent ComponentType Компонент модального окна
@prop {Function} onSelect - функция выбора значения
@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 => {}" Обработчик изменения значения поля
@param nextValue - новое значение поля
url + string апи-url для запроса данных
queryParams { [key: string]: any; } Перманентные параметры запроса
searchParamName string Ключ, по которому текст строки поиска будет добавлен к параметрам запроса
pageParamName string Ключ, по которому номер текущей страницы будет добавлен к параметрам запроса
offsetParamName string Ключ, по которому индекс первой опции для запроса будет добавлен к параметрам запроса
mapResponse MapResponse Функция маппинга ответа сервера в формат react-select-async-paginate
get Get Асинхронная функция запроса данных с сервера
@param url - апи-url
@param queryParams - параметры запроса
@returns ответ сервера
debounceTimeout number Задержка при отправке запросов
cacheUniqs + any[] Список значений при изменении одного из которых опции будут сброшены

Creatable

Название Обязательность Тип Значение по умолчанию Описание
allowCreateWhileLoading boolean
formatCreateLabel (inputValue: string) => ReactNode
isValidNewOption (inputValue: string, value: any, options: OptionsType) => 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 ref для получения экземпляра react-select
modalComponent ComponentType Компонент модального окна
@prop {Function} onSelect - функция выбора значения
@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 => {}" Обработчик изменения значения поля
@param nextValue - новое значение поля
options + OptionsType GroupedOptionsType

AsyncCreatable

Название Обязательность Тип Значение по умолчанию Описание
allowCreateWhileLoading boolean
formatCreateLabel (inputValue: string) => ReactNode
isValidNewOption (inputValue: string, value: any, options: OptionsType) => 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 ref для получения экземпляра react-select
modalComponent ComponentType Компонент модального окна
@prop {Function} onSelect - функция выбора значения
@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 => {}" Обработчик изменения значения поля
@param nextValue - новое значение поля
loadOptions LoadOptions<any, any> Асинхронная функция запроса данных с сервера в формате react-select-async-paginate
@param search - значение строки поиска
@param prevOptions - список загруженных опций
@param additional - дополнительные параметры запроса
@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 ref для получения экземпляра react-select
modalComponent ComponentType Компонент модального окна
@prop {Function} onSelect - функция выбора значения
@prop {Function} onCancel - функция закрытия модального окна без изменения значения
modalProps { [key: string]: any; } Дополнительные props компонента модального окна
isDisabled boolean false Выключено ли поле
getOptionLabel GetOptionLabel null Функция получения заголовка опции для вывода и фильтрации
labelKey string "label" Ключ, для получения заголовка опции в случае, если не определено getOptionLabel
Ключ для отображения текста поля, работает только в случае, если getOptionLabel не определён
getOptionValue GetOptionValue null Функция получения значения опции
valueKey string "value" Ключ, для получения значения опции в случае, если не определено getOptionValue
Ключ для нахождения значения поля, работает только в случае, если getOptionValue не определён
onChange ((nextValue: any) => void) ((nextValue: any) => void) "(): void => {}"
mainPlaceholder string "Выберите..." Плейсхолдер компонента, который всегда отображается
options + OptionsType GroupedOptionsType

FilterSelectAjax

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