Installations

npm install react-dadata-suggestions-fork-onblur-autocomplete

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

10.15.3

NPM Version

6.10.2 Releases

Unable to fetch releases

Download Statistics

Total Downloads

0

Last Day

0

Last Week

0

Last Month

0

Last Year

0

Maintainers

1

Package Meta Information

Latest Version

1.0.1

Package Id

react-dadata-suggestions-fork-onblur-autocomplete@1.0.1

Unpacked Size

82.18 kB

Size

28.70 kB

File Count

34

NPM Version

6.10.2

Node Version

10.15.3

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

0%

NaN

Compared to previous day

Last Week

0%

NaN

Compared to previous week

Last Month

0%

NaN

Compared to previous month

Last Year

0%

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

1

react-highlight-words

Peer Dependencies

1

react

Dev Dependencies

21

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

No vulnerabilities found.

No security vulnerabilities found.