react-dadata-suggestions

React-компонент для подсказок dadata.

С чего начать

Установка

npm i --save react-dadata-suggestions

страница на npm

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

Песочница

import React, { Component } from 'react';
import DadataSuggestions from 'react-dadata-suggestions';
import "react-dadata-suggestions/dist/styles.css";

const token = 'your_token';

class App extends Component {
  render() {
    return (
      <DadataSuggestions
        token={ token }
        onSelect={ (suggestion) => console.log(suggestion) }
      />
    );
  }
}

export default App;

Настройка

Пропсы

| prop | type | description | required | default | |:--------------:|:----------------:|:-------------------:|:----------:|:--------:| |token| string|ваш api токен|true|''| |count|integer|максимальное количество подсказок в списке|false|10| |deferRequestBy|integer|задержка перед запросом в мс|false|300| |placeholder|string| |false|''| |hint|string|подсказка для пользователя в выпадающем списке|false|Выберите вариант ниже или продолжите ввод| |minChars|integer|минимальная длина запроса для обращения к api|false|3| |geolocation|boolean|Приоритет городу пользователя, только для адресов|false|true| |service|string|Доступные значения: address, bank, fio, email, party|false|address| |highlighting|bool|подсветка совпавших слов в подсказках|false|true| |receivePropsBehaveLikeOnChange|bool|см. ниже| false| false | |value|object|экземпляр подсказки|false|null| |name|string|имя инпута|false|null| |readOnly||отметить инпут как readonly|false|| |disabled||отметить инпут как disabled|false|| |suggestionsFormatter (suggestion)|function|кастомный форматтер для подсказок в списке|false|| |selectedSuggestionFormatter (suggestion)|function|кастомный форматтер для выбранной подсказки (результат будет установле в качестве строки запроса)|false|| |specialRequestOptions|object|дополнительные параметры для тела запроса|false|| |onSelect (suggestion)|function|обработчик выбора подсказки|true|| |onChange (query)|function|обработчик изменения запроса| false|| |onError (error)|function|обработчик ошибки обращения к api|false|| |onBlur|function|вызывается когда фокус пропадает с элемента|false|| |onFocus|function|вызывается при установке фокуса на элемент|false||

Структуру подсказки можно подсмотреть в официальной документации к api dadata

• receivePropsBehaveLikeOnChange - только для версий < 2.0. Изменяет поведениеcomponentWillReceiveProps. По умолчанию при обновлении пропсов просто сбрасывается стейт, если же значение установлено в true, то поведение componentWillReceiveProps совпадает с поведением onChange. С версии 2.0 это единственный вариант поведения.

Подсветка совпадений

Для кастомизации подсветки переопределите класс .suggestions-highlighting.

License

This project is licensed under the MIT License