<commit_before># React Dadata

[![dependencies](https://img.shields.io/david/vitalybaev/react-dadata)](https://www.npmjs.com/package/react-dadata)
[![npm package](https://img.shields.io/npm/v/react-dadata.svg)](https://www.npmjs.com/package/react-dadata)
[![npm downloads](https://img.shields.io/npm/dm/react-dadata.svg)](https://www.npmjs.com/package/react-dadata)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-dadata)](https://bundlephobia.com/result?p=react-dadata)
![licence](https://img.shields.io/npm/l/react-dadata)

Легковесный (**~3 kb min gzip**), типизированный и настраиваемый React компонент для подсказок **адресов и организаций** с помощью сервиса DaData.ru

[Демонстрация](https://vitalybaev.github.io/react-dadata/)

**Предоставлена документация для 2.x, версия 1.x не поддерживается**

## Внешний вид

### Адреса

<img width="489" alt="React DaData адреса" src="https://user-images.githubusercontent.com/724423/82560699-9c5edf00-9b7a-11ea-83fc-d286a17c2235.png">

### Организации
<img width="497" alt="React DaData организации" src="https://user-images.githubusercontent.com/724423/82560793-c87a6000-9b7a-11ea-9d18-6e1335e470dc.png">

## Установка
```
npm install react-dadata
```
или
```
yarn react-dadata
```

## Пример использования
```jsx
import { AddressSuggestions } from 'react-dadata';
import 'react-dadata/dist/react-dadata.css';

const [value, setValue] = useState();

<AddressSuggestions token="API_KEY" value={value} onChange={setValue} />
```

## Параметры

### Общие параметры

| Свойство  | Обязательный | Тип | Описание |
| ------------- | ------------- | ------------- | ------------- |
| token  | Да  | string  | Авторизационный токен DaData.ru  |
| defaultQuery  | Нет  | string  | Начальное значение поля ввода  |
| count  | Нет  | number  | Количество подсказок, которое требуется получит от DaData. По-умолчанию: **10**  |
| autoload  | Нет  | boolean  | Если `true`, то запрос на получение подсказок будет инициирован в фоне сразу, после монтирования компонента  |
| onChange  | Нет  | function(suggestion: DaDataSuggestion<Type>)  | Функция, вызываемая при выборе подсказки  |
| inputProps  | Нет  | Object of HTMLInputElement Props  | любые стандартные пропсы для input. Свойство `value` игнорируется. Используйте его для передачи инпуту определенных атрибутов или для отслеживания событий |
| hintText  | Нет  | ReactNode  | Если передано, отображается в виде подсказки над списком подсказок |
| renderOption  | Нет  | function(suggestion: DaDataSuggestion<Type>) => ReactNode  | Реализуйте этот callback, чтобы вернуть компонент для отображения подсказки |
| containerClassName  | Нет  | string  | CSS класс для контейнера компонента, если не передан, используется класс для стилей из коробки.  |
| suggestionClassName  | Нет  | string  | CSS класс для компонента подсказки в списке, если не передан, используется класс для стилей из коробки.  |
| currentSuggestionClassName  | Нет  | string  | CSS класс который добавляется к компоненту текущей выбранной подсказки в списке, если не передан, используется класс для стилей из коробки.  |
| hintClassName  | Нет  | string  | CSS класс блока текста-пояснения над подсказками, если не передан, используется класс для стилей из коробки.  |
| highlightClassName  | Нет  | string  | CSS класс элемента, подсвечивающего совпадения при наборе, если не передан, используется класс для стилей из коробки.  |

## Типы подсказок и примеры

### Адреса

```jsx
import { AddressSuggestions } from 'react-dadata';
import 'react-dadata/dist/react-dadata.css';

const [value, setValue] = useState();

<AddressSuggestions token="API_KEY" value={value} onChange={setValue} />
```

#### Дополнительные параметры для компонента адресов

| Свойство  | Обязательный | Тип | Описание |
| ------------- | ------------- | ------------- | ------------- |
| filterFromBound  | Нет  | string  | Сужение области поиска, параметр from_bound в запросе  |
| filterToBound  | Нет  | string  | Сужение области поиска, параметр to_bound в запросе  |
| filterLocations  | Нет  | array  | Сужение области поиска, параметр locations в запросе  |
| filterLocationsBoost  | Нет  | array  | Указание приоритета города, параметр locations_boost в запросе  |

### Организации

```jsx
import { PartySuggestions } from 'react-dadata';
import 'react-dadata/dist/react-dadata.css';

const [value, setValue] = useState();

<PartySuggestions token="API_KEY" value={value} onChange={setValue} />
```

#### Дополнительные параметры для компонента организаций

| Свойство  | Обязательный | Тип | Описание |
| ------------- | ------------- | ------------- | ------------- |
| filterStatus  | Нет  | array  | Фильтр по статусу организации, параметр status в запросе  |
| filterType  | Нет  | string  | Фильтр по типу организации, параметр type в запросе  |
| filterLocations  | Нет  | array  | Сужение области поиска, параметр locations в запросе  |
| filterLocationsBoost  | Нет  | array  | Указание приоритета города, параметр locations_boost в запросе  |

## Стилизация

`react-dadata` поставляется с опциональным CSS файлом, который из коробки неплохо выглядит и выполняет свои функции.
Чтобы использовать его, укажите этот CSS файл в импорте или создайте CSS файл у себя с нужными стилями.

```jsx
import { AddressSuggestions } from 'react-dadata';

// Импортируем CSS файл
import 'react-dadata/dist/react-dadata.css';

// ...
<AddressSuggestions token="API_KEY" value={value} onChange={setValue} />
```

**Обратите внимание**, что ваш сборщик должен быть настроен соответствующим образом для обработки CSS файлов.

Если у вас в проекте используется CSS-in-JS решение, то вы должны передавать CSS классы в компонент с помощью пропсов:
* `inputProps.className` - для поля ввода
* `containerClassName` - для контейнера компонента
* `suggestionsClassName` - для блока с подсказками
* `suggestionClassName` - для блока с подсказкой
* `currentSuggestionClassName` - для блока с текущей выделенной подсказкой
* `hintClassName` - для блока с пояснением
* `highlightClassName` - для тега `mark`, которым выделяются совпадения с введенным текстом

## TypeScript

`react-dadata` написан на TypeScript, поэтому типы встроены.

```tsx
import React, { useState } from 'react';
import { AddressSuggestions, DaDataSuggestion, DaDataAddress } from 'react-dadata';
import 'react-dadata/dist/react-dadata.css';

const [value, setValue] = useState<DaDataSuggestion<DaDataAddress> | undefined>();

// Также можно воспользоваться готовым типом DaDataAddressSuggestion для адрес или DaDataPartySuggestion для организаций
// import { DaDataAddressSuggestion } from 'react-dadata';
// const [value, setValue] = useState<DaDataAddressSuggestion | undefined>();

<AddressSuggestions token="API_KEY" value={value} onChange={setValue} />
```

## Лицензия

```
The MIT License

Copyright (c) 2016 <NAME> <<EMAIL>>, vit<EMAIL><commit_msg>Исправлена опечатка<commit_after># React Dadata

[![dependencies](https://img.shields.io/david/vitalybaev/react-dadata)](https://www.npmjs.com/package/react-dadata)
[![npm package](https://img.shields.io/npm/v/react-dadata.svg)](https://www.npmjs.com/package/react-dadata)
[![npm downloads](https://img.shields.io/npm/dm/react-dadata.svg)](https://www.npmjs.com/package/react-dadata)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-dadata)](https://bundlephobia.com/result?p=react-dadata)
![licence](https://img.shields.io/npm/l/react-dadata)

Легковесный (**~3 kb min gzip**), типизированный и настраиваемый React компонент для подсказок **адресов и организаций** с помощью сервиса DaData.ru

[Демонстрация](https://vitalybaev.github.io/react-dadata/)

**Предоставлена документация для 2.x, версия 1.x не поддерживается**

## Внешний вид

### Адреса

<img width="489" alt="React DaData адреса" src="https://user-images.githubusercontent.com/724423/82560699-9c5edf00-9b7a-11ea-83fc-d286a17c2235.png">

### Организации
<img width="497" alt="React DaData организации" src="https://user-images.githubusercontent.com/724423/82560793-c87a6000-9b7a-11ea-9d18-6e1335e470dc.png">

## Установка
```
npm install react-dadata
```
или
```
yarn react-dadata
```

## Пример использования
```jsx
import { AddressSuggestions } from 'react-dadata';
import 'react-dadata/dist/react-dadata.css';

const [value, setValue] = useState();

<AddressSuggestions token="API_KEY" value={value} onChange={setValue} />
```

## Параметры

### Общие параметры

| Свойство  | Обязательный | Тип | Описание |
| ------------- | ------------- | ------------- | ------------- |
| token  | Да  | string  | Авторизационный токен DaData.ru  |
| defaultQuery  | Нет  | string  | Начальное значение поля ввода  |
| count  | Нет  | number  | Количество подсказок, которое требуется получит от DaData. По-умолчанию: **10**  |
| autoload  | Нет  | boolean  | Если `true`, то запрос на получение подсказок будет инициирован в фоне сразу, после монтирования компонента  |
| onChange  | Нет  | function(suggestion: DaDataSuggestion<Type>)  | Функция, вызываемая при выборе подсказки  |
| inputProps  | Нет  | Object of HTMLInputElement Props  | любые стандартные пропсы для input. Свойство `value` игнорируется. Используйте его для передачи инпуту определенных атрибутов или для отслеживания событий |
| hintText  | Нет  | ReactNode  | Если передано, отображается в виде подсказки над списком подсказок |
| renderOption  | Нет  | function(suggestion: DaDataSuggestion<Type>) => ReactNode  | Реализуйте этот callback, чтобы вернуть компонент для отображения подсказки |
| containerClassName  | Нет  | string  | CSS класс для контейнера компонента, если не передан, используется класс для стилей из коробки.  |
| suggestionClassName  | Нет  | string  | CSS класс для компонента подсказки в списке, если не передан, используется класс для стилей из коробки.  |
| currentSuggestionClassName  | Нет  | string  | CSS класс который добавляется к компоненту текущей выбранной подсказки в списке, если не передан, используется класс для стилей из коробки.  |
| hintClassName  | Нет  | string  | CSS класс блока текста-пояснения над подсказками, если не передан, используется класс для стилей из коробки.  |
| highlightClassName  | Нет  | string  | CSS класс элемента, подсвечивающего совпадения при наборе, если не передан, используется класс для стилей из коробки.  |

## Типы подсказок и примеры

### Адреса

```jsx
import { AddressSuggestions } from 'react-dadata';
import 'react-dadata/dist/react-dadata.css';

const [value, setValue] = useState();

<AddressSuggestions token="API_KEY" value={value} onChange={setValue} />
```

#### Дополнительные параметры для компонента адресов

| Свойство  | Обязательный | Тип | Описание |
| ------------- | ------------- | ------------- | ------------- |
| filterFromBound  | Нет  | string  | Сужение области поиска, параметр from_bound в запросе  |
| filterToBound  | Нет  | string  | Сужение области поиска, параметр to_bound в запросе  |
| filterLocations  | Нет  | array  | Сужение области поиска, параметр locations в запросе  |
| filterLocationsBoost  | Нет  | array  | Указание приоритета города, параметр locations_boost в запросе  |

### Организации

```jsx
import { PartySuggestions } from 'react-dadata';
import 'react-dadata/dist/react-dadata.css';

const [value, setValue] = useState();

<PartySuggestions token="API_KEY" value={value} onChange={setValue} />
```

#### Дополнительные параметры для компонента организаций

| Свойство  | Обязательный | Тип | Описание |
| ------------- | ------------- | ------------- | ------------- |
| filterStatus  | Нет  | array  | Фильтр по статусу организации, параметр status в запросе  |
| filterType  | Нет  | string  | Фильтр по типу организации, параметр type в запросе  |
| filterLocations  | Нет  | array  | Сужение области поиска, параметр locations в запросе  |
| filterLocationsBoost  | Нет  | array  | Указание приоритета города, параметр locations_boost в запросе  |

## Стилизация

`react-dadata` поставляется с опциональным CSS файлом, который из коробки неплохо выглядит и выполняет свои функции.
Чтобы использовать его, укажите этот CSS файл в импорте или создайте CSS файл у себя с нужными стилями.

```jsx
import { AddressSuggestions } from 'react-dadata';

// Импортируем CSS файл
import 'react-dadata/dist/react-dadata.css';

// ...
<AddressSuggestions token="API_KEY" value={value} onChange={setValue} />
```

**Обратите внимание**, что ваш сборщик должен быть настроен соответствующим образом для обработки CSS файлов.

Если у вас в проекте используется CSS-in-JS решение, то вы должны передавать CSS классы в компонент с помощью пропсов:
* `inputProps.className` - для поля ввода
* `containerClassName` - для контейнера компонента
* `suggestionsClassName` - для блока с подсказками
* `suggestionClassName` - для блока с подсказкой
* `currentSuggestionClassName` - для блока с текущей выделенной подсказкой
* `hintClassName` - для блока с пояснением
* `highlightClassName` - для тега `mark`, которым выделяются совпадения с введенным текстом

## TypeScript

`react-dadata` написан на TypeScript, поэтому типы встроены.

```tsx
import React, { useState } from 'react';
import { AddressSuggestions, DaDataSuggestion, DaDataAddress } from 'react-dadata';
import 'react-dadata/dist/react-dadata.css';

const [value, setValue] = useState<DaDataSuggestion<DaDataAddress> | undefined>();

// Также можно воспользоваться готовым типом DaDataAddressSuggestion для адреса или DaDataPartySuggestion для организаций
// import { DaDataAddressSuggestion } from 'react-dadata';
// const [value, setValue] = useState<DaDataAddressSuggestion | undefined>();

<AddressSuggestions token="API_KEY" value={value} onChange={setValue} />
```

## Лицензия

```
The MIT License

Copyright (c) 2016 <NAME> <<EMAIL>>, vit<EMAIL>
{'fraction_non_alphanumeric': 0.1315693828596351, 'fraction_numerical': 0.012066584284364324, 'mean_word_length': 4.332558139534884, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 37, 'https://': 24, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1582467', 'n_tokens_mistral': 5125, 'n_tokens_neox': 5552, 'n_words': 1210}