# react-dadata-suggestions-reactoutsideclick

> Just another one react component for dadata suggestions

Latest version **2.0.0** (published 2020-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dadata-suggestions-reactoutsideclick
pnpm add react-dadata-suggestions-reactoutsideclick
yarn add react-dadata-suggestions-reactoutsideclick
bun add react-dadata-suggestions-reactoutsideclick
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2020-09-16 |
| First published | 2020-09-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 105.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10 |
| Author | Roman Bolkhovitin |
| Maintainers | naranov |
| Keywords | dadata, suggestions, reactjs, react, дадата, подсказки |

## Links

- npm: https://www.npmjs.com/package/react-dadata-suggestions-reactoutsideclick
- Repository: https://github.com/nobbynobbs/react-dadata-suggestions
- Homepage: https://github.com/nobbynobbs/react-dadata-suggestions#readme
- Issues: https://github.com/nobbynobbs/react-dadata-suggestions/issues
- npm.io page: https://npm.io/package/react-dadata-suggestions-reactoutsideclick

## Dependencies (4)

- [airbnb-prop-types](https://npm.io/package/airbnb-prop-types.md) ^2.15.0
- [document.contains](https://npm.io/package/document.contains.md) ^1.0.1
- [consolidated-events](https://npm.io/package/consolidated-events.md) ^1.1.1 || ^2.0.0
- [react-highlight-words](https://npm.io/package/react-highlight-words.md) ^0.16.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2020-09-16

## README

# react-dadata-suggestions

React-компонент для [подсказок dadata](https://dadata.ru/suggestions "official website").

## С чего начать

### Установка
`npm i --save react-dadata-suggestions`

[страница на npm](https://www.npmjs.com/package/react-dadata-suggestions)

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

[Песочница](https://codesandbox.io/embed/p95804280q)

```javascript
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](https://confluence.hflabs.ru/pages/viewpage.action?pageId=204669100)

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

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

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

## License

This project is licensed under the MIT License

---
_Source: https://npm.io/package/react-dadata-suggestions-reactoutsideclick · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._