react-dadata-suggestions

Just another one React component for dadata suggestions.

Getting started

Installation

npm i --save react-dadata-suggestions

page on npm

Basic usage

Examples on sandbox

1import React, { Component } from 'react';
2import DadataSuggestions from 'react-dadata-suggestions';
3import "react-dadata-suggestions/dist/styles.css";
4
5const token = 'your_token';
6
7class App extends Component {
8  render() {
9    return (
10      <DadataSuggestions
11        token={ token }
12        onSelect={ (suggestion) => console.log(suggestion) }
13      />
14    );
15  }
16}
17
18export default App;
19

Available props

Options

prop	type	description	required	default
token	string	api token	true	''
count	integer	maximal suggestions count in list	false	10
deferRequestBy	integer	delay in milliseconds before each request	false	300
placeholder	string		false	''
hint	string	hint for user in suggestions list	false	Выберите вариант ниже или продолжите ввод
minChars	integer	minimal length of query for requesting to api	false	3
geolocation	boolean	priority to user city. Works for address suggestions only.	false	true
service	string	available values: address, bank, fio, email and party (I don't know why, but api for searching of the companies is called "party")	false	address
highlighting	bool	highlight matched words in suggestions	false	true
receivePropsBehaveLikeOnChange	bool	see below	false	false
value	object	suggestion item	false	null
name	string	input name	false	null
readOnly		mark field as readonly	false
disabled		mark field as disabled	false
suggestionsFormatter (suggestion)	function	custom formatter for items in suggestions list	false
selectedSuggestionFormatter (suggestion)	function	the same as previous for selected suggestion (result will be placed in query string)	false
specialRequestOptions	object	additional data for request body	false
onSelect (suggestion)	function	be called when user select the address from suggestions	true
onChange (query)	function	be called when user typing something in input field	false
onError (error)	function	will be called if api request failed	false
onBlur	function	will be called on focus out	false
onFocus	function	will be called on focus event	false

The structure of suggestion object can be found in official dadata api documentation

• receivePropsBehaveLikeOnChange - change the behavior of componentWillReceiveProps life-cycle hook. By default this handler just resets the state of component. If this prop is set to true componentWillReceiveProps will behave exactly like onChange handler do. Probably it must be the only behavior, but the first implementation was keeped as default for backward compability reasons.

Highlighting

Override class .suggestions-highlighting in your CSS to customize highlighting.

License

This project is licensed under the MIT License