React-dadata-suggestions NPM

react-dadata-suggestions

С чего начать

Установка

npm i --save react-dadata-suggestions

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

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 это единственный вариант поведения.