nobbynobbs / react-dadata-suggestions

Just another one React component for dadata suggestions

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

react-dadata-suggestions's Issues

How to add styles for suggestion highlighting

Hello,

How can I add css styles for highlighted words? I can't find corresponding class in styles.

`bounds` prop

Is it possible to use bounds param for address suggestions?
Like here:

• https://dadata.userecho.com/communities/1/topics/462-v-bounds-peredavat-2-i-bolshe-parametrov
• https://codepen.io/dadata/pen/cGkah?editors=101

@nobbynobbs

Initializing react-dadata-suggestions with data from the state

Hi there,

I have one more question about using react-dadata-suggestions with react-final-form.

I would like to initialize the form with some data from the state. When I do it, all the fields are working, except the input with react-dadata-suggestions. Here is an example.

Is there any way I can fix it?

Как связать эту библиотеку с useForm?

Здравствуйте, я использую поле для ввода email адреса, но проблема в том что email у меня находится в форме, как и все остальное. Я как всегда пытался связать все это дело через контроллер, но почему-то onChange не видит value и значение туда не передается как я понял.
<Controller control={control} name="email" onChange={ (event) => setEmail(event.target.value) } rules={{ required: true, minLength: 1, maxLength: { value: 50, message: "*Почта слишком большая", } }} render={({ field: {onChange, onBlur, value} }) => <> <DadataSuggestions token="token" onSelect={ (suggestion) => console.log(suggestion) } service="email" count={5} onBlur={onBlur} onChange={ (event) => onChange(event.target.value) } // проблема вся вот в этой строчке /> </> } />

Возможность указать приоритет города

Добрый день.

Скажите, пожалуйста, есть ли в библиотеке возможность указать приоритет города при ранжировании (locations_boost)? Я попробовала указать приоритет в поле specialRequestOptions, но мне кажется, что он не срабатывает. Вот ссылка на codesandbox.

Возможность передать input дополнительные параметры

Добрый день.

Скажите, пожалуйста, можно ли передать input дополнительные параметры, например,
tabIndex="0" data-select data-name={input.name}?

Как передать атрибут id компоненту

Как передать атрибут id компоненту?

<DadataSuggestions
            {...input}
            token="***"
            placeholder="Введите город"
            id= "Тест"
         />

Проблемы с определением ОКТМО для адресов в Санкт-Петербурге

В связи с тем, что в Питере есть адреса с литерой и без (подробнее см. здесь), для домов без литеры не определяется код ОКТМО.

В поддержке Дадаты сообщили, что при работе с подсказками необходимо делать как минимум два запроса, это принцип работы сервиса. При первом запросе с count > 1 значение ОКТМО берется из справочника ФИАС → адреса без литеры там нет → ОКТМО нет.

Далее нужно сделать второй запрос с count = 1, то есть выбрать адрес, тогда ОКАТО/ОКТМО появятся для адреса без литеры. Текст запроса должен быть результатом одного из предыдущих запросов (значением поля unrestricted_value).

Как я понимаю, сейчас для адресов выполняется только один запрос. Не могли бы вы добавить при выборе адреса второй запрос с count = 1?

deferRequestBy option

Hello!

Is it possible to configure deferRequestBy option? As in https://confluence.hflabs.ru/pages/viewpage.action?pageId=207454318 jquery plugin

Ошибка после unmount компонента из-за активного запроса саджестов

Похоже возникает из-за обновления состояния компонента в ответе реквеста, когда самого компонента уже нет.

Возможность отключить suggestions

На проекте упёрлись в то, что для некоторых регионов нам не нужны подсказки и, соответственно, запрос к dadata. Попробовали подменить на другой инпут, но тогда слетает каретка (задача отключить подсказки в момент редактирования адреса).

Можем ли мы добавить опцию disableDadata, чтобы отключить подсказки и запрос к dadata при редактировании?

breaking changes в версии 1.0.3

При настройке тревиса выяснилось, что в npm все время выкладывалась девелоперская сборка пакета. Теперь выкладывается нормальная, но в ней js отдельно, стили отдельно, поэтому css нужно подключать явно, см. README.

Извиняюсь за такие фокусы в патч версии.

Get location data

Is it possible to get location data on API creation?
I mean return of location data on detectAddress() in FetchApi

Не работают touch ивенты

На мобильных устройствах невозможно выбрать значения, которые показываются в всплывающем окне подсказок. Как можно решить данную проблему?

Add a class name to the query input

Is there any way to change a class name for the input? May be add it as a prop?

Выпадалка в body

Выпадалка с подходящими вариантами сейчас размещается в том же контейнере. Это не всегда удобно, если родительские элементы имеют ограничение по overflow.

Планируется ли возможность размещения выпадалки в body и абсолютное позиционирование ее относительно инпута?

Или как сейчас решить эту проблему?

Styles for LIQUIDATED are not working

Hello,

Styles for LIQUIDATED companies are not working in react-final-form. Is there any way to fix it?

Here is codesandbox (you can try it with ИНН 110380625809).

Warning: Invalid DOM property `autocomplete`. Did you mean `autoComplete`?

There is a warning for created input element.

Поддержка подсказок по ФИАС

Добрый день. Скажите, пожалуйста, планируете ли вы добавить поддержку подсказок по ФИАС?

The value is reset to "" when using setState

Hi! Thanks for the great solution for support DaData in React.

But there is a problem with setState inside onSelect:
<DadataSuggestions token={ token } placeholder="Иванов Иван Иванович" service="fio" onSelect={ (suggestion) => { this.setState({person: suggestion}) } } />

When I select a suggestion, the value of input reset to "". What am I doing wrong?

Why `dist` directory is not in repo?

I tried to import package into my project but module was not found.
By the way, main from package.json is related to dist/index.js

Is it possible to set predefined value for text input?

Suggestions cannot be selected on iphone

I was told that suggestions list is not "selectable" on iphones (at least on SE and 6).
It is opened, but not "cliсkable" - nothing is selected, list remains open.

On android and desktop (windows) everything is ok. Not tested on Mac yet.

I asked the same users to compare with original dadata jquery suggestions - they say everything is ok there.

Could you please investigate this issue?

Problem with extracting onFocus event

Hello,

I'm using react-dadata-suggestions with react-final-form (RFF) as a custom component. RFF has some FieldRenderProps, which can be used with inputs. I'm using input.value and meta.active to define label classes like this:

  const labelClasses = classnames(
    "input-label",
    {
      "input-label--active": input.value !== "" || meta.active
    },
    className
  );

In case with DadataSuggestions input.value works, but meta.active (which shows whether or not the field currently has focus) doesn't.

Here is a codesandbox. Currently address input doesn't get input-label--active class onFocus, but only when there is some value.

(There is also an example of another custom component, where both input.value and meta.active work.)

Is there anyway to fix it?

placeholder prop for input

A placholder prop for query input should be provided.

Using react-dadata-suggestions with Formik or react-final-form

Hi there,

Do you have an example of using react-dadata-suggestions with Formik or Final Form? I tried to do it myself with Final Form, but I can't get it to work. Here is my codesandbox.

Here is a codesandbox for Formik, which is also not working.