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
import React, { Component } from 'react';
import DebounceText from 'react-debounce-text';
class App extends Component {
fetch(query, success) {
let url = `https://api.github.com/search/repositories?q=${query}&language=javascript`;
fetch(url)
.then(response => {
return response.json();
})
.then(results => {
if (results.items) {
let items = results.items.map((res, i) => {
return { id: i, value: res.full_name };
});
return success(items);
}
return success([])
});
}
renderItem(item) {
return <div>{item.value}</div>;
}
onSelect(item) {
console.log(item);
}
render() {
return (
<DebounceText
fetch={this.fetch.bind(this)}
renderItem={this.renderItem.bind(this)}
onSelect={this.onSelect.bind(this)}
/>
);
}
}
Styles
By default, the package has no style.
Consider importing the stylesheet (scss)
it comes with:
@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. |