Debounce text input for super fast react.

Installation

Install through npm:

npm install @tatil/react-debounce-text

or yarn

yarn add @tatil/react-debounce-text

Usage

1import React, { Component } from 'react';
2import DebounceText from 'react-debounce-text';
3
4class App extends Component {
5  fetch(query, success) {
6    let url = `https://api.github.com/search/repositories?q=${query}&language=javascript`;
7    fetch(url)
8      .then(response => {
9        return response.json();
10      })
11      .then(results => {
12        if (results.items) {
13          let items = results.items.map((res, i) => {
14            return { id: i, value: res.full_name };
15          });
16
17          return success(items);
18        }
19        
20        return success([])
21      });
22  }
23
24  renderItem(item) {
25    return <div>{item.value}</div>;
26  }
27
28  onSelect(item) {
29    console.log(item);
30  }
31
32  render() {
33    return (
34      <DebounceText
35        fetch={this.fetch.bind(this)}
36        renderItem={this.renderItem.bind(this)}
37        onSelect={this.onSelect.bind(this)}
38      />
39    );
40  }
41}
42

Styles

By default, the package has no style.

Consider importing the stylesheet (scss) it comes with:

1@import "../../node_modules/react-debounce-text/styles/style"

Props

Prop	Type	Description
fetch	function(query, success)	It run when text input is onChange.
renderItem	function(item, index)	It renders the results single.
onSelect	function(item, index)	When you click on the found result, it will run.