@n3/react-autocomplete

@n3/react-autocomplete

Установка

npm install @n3/react-autocomplete

API

Использование

import Autocomplete from '@n3/react-autocomplete';

...

<Autocomplete
  loadOptions={(q) => fetch(`/options/?q=${q}`).then((response) => response.json())}
  value={value}
  onChangeValue={(text) => onChangeCallback(text)}
  onSelect={(text, option) => onSelectCallback(text, option)}
/>

Терминология

Лейбл опции вычисляется следующим способом:

1. Если определено `getItemValue`, лейбл поля будет равен результату вызова `getItemValue` от опции.
2. Если определено `labelKey`, лейбл поля будет равен значению опции по ключу `labelKey`.
3. Лейбл поля будет равен значению опции по ключу "label".

Props

• loadOptions - обязательное, асинхронная функция, которая должна возвращать список опций для автокомплита. Первым аргументом принимает параметр поиска.

• value - обязательное, строка, которая выводится в инпуте.

• onChangeValue - обязательное, колбэк, вызывающийся после ручного изменения инпута. Первым аргументом принимает текущее значение инпута.

• onSelect - обязательное, колбэк, вызывающийся после выбора опции из списка. Первым аргументом принимает лейбл опции, вторым - опцию.

• className - строка, дополнительный css-класс инпута автокомплита.

• disabled - булево, выключено ли поле.

• hasError - булево, есть ли у поля ошибка.

• valueKey - строка, по какому ключу опция считается уникальной. По умолчанию - "value".

• labelKey - строка, нужна для определения лейбла опции.

• getItemValue - функция, нужна для определения лейбла опции.

• valueRenderer - функция, нужна для кастомного рендера опции. Может возвращать jsx. Первым аргументом принимает опцию.

• wrapperClassName - строка, css-класс враппера над инпутом, по-умолчанию "n3__autocomplete".

• inputClassName - строка, css-класс инпута, по-умолчанию "n3__input".

• disabledInputClassName - строка, css-класс выключенного инпута, по-умолчанию "n3__input_disabled".

• errorInputClassName - строка, css-класс инпута с ошибкой, по-умолчанию "n3__input_has-error".

• menuClassName - строка, css-класс враппера над меню, по-умолчанию "n3__autocomplete__menu".

• menuItemClassName - строка, css-класс опции меню, по-умолчанию "n3__autocomplete__menu-item".

• menuItemHighlightedClassName - строка, css-класс подсвеченной опции меню, по-умолчанию "n3__autocomplete__menu-item__highlighted".

Стили

По-умолчанию, интегрируется со стилями @n3/kit без подключения других стилей.

Подключение standalone-стилей:

import '@n3/react-autocomplete/dist/n3-react-autocomplete.css';