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