/react-dadata-suggestions

Just another one React component for dadata suggestions

Primary LanguageJavaScript

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