@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 с примерами.