0.0.6 • Published 4 years ago

react-debounce-text v0.0.6

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

Installation

Install through npm:

npm install react-debounce-text

or yarn

yarn add 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

PropTypeDescription
fetchfunction(query, success)It run when text input is onChange.
renderItemfunction(item, index)It renders the results single.
onSelectfunction(item, index)When you click on the found result, it will run.
0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago