@n3/react-autocomplete
Установка
yarn add @n3/react-autocomplete styled-components
API
Использование
import { Autocomplete } from '@n3/react-autocomplete';
<Autocomplete
loadOptions={(q) => fetch(`/options/?q=${q}`).then((response) => response.json())}
value={value}
onChange={(event) => {
onChangeCallback(event.target.value)
}}
onSelect={(text, option) => {
onSelectCallback(text, option);
}}
/>
Терминология
Лейбл опции вычисляется следующим способом:
1. Если определено `getItemValue`, лейбл поля будет равен результату вызова `getItemValue` от опции.
2. Если определено `labelKey`, лейбл поля будет равен значению опции по ключу `labelKey`.
3. Лейбл поля будет равен значению опции по ключу "label".
Props
-
loadOptions
- обязательное, асинхронная функция, которая должна возвращать список опций для автокомплита. Первым аргументом принимает параметр поиска. -
value
- обязательное, строка, которая выводится в инпуте. -
onChange
- необязательное, колбэк, вызывающийся после ручного изменения инпута. Первым аргументом принимает событие. -
onSelect
- необязательное, колбэк, вызывающийся после выбора опции из списка. Первым аргументом принимает лейбл опции, вторым - опцию. -
disabled
- булево, выключено ли поле. -
hasError
- булево, есть ли у поля ошибка. -
hasWarning
- булево, есть ли у поля предупреждение. -
inputProps
- дополнительныеprops
, которые будут переданы инпуту. -
labelKey
- строка, нужна для определения лейбла опции. -
getOptionLabel
- функция, нужна для определения лейбла опции. -
formatOptionLabel
- функция, нужна для кастомного рендера опции. Может возвращать jsx. Первым аргументом принимает опцию. -
components
- объект переопределяемых компонентов. Ключи:Wrapper
Input
Menu
MenuItem
Локальная разработка
Репозиторий использует стабильную версию yarn.
Команды
-
yarn build
- сборка; -
yarn clean
- удалить все собранне файлы; -
yarn test
- валидация кода; -
yarn start
- запуск storybook с примерами.