Package Exports

react-debounce-component

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-debounce-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-debounce-component

Debounce any component with React or React Native

<input>
<Debounce ms={500}>
  <List/>
</Debounce>

Tiny: react-debounce-component is very tiny, fast and does not require any other package. Overall it has under 70 lines of code.

Generic: You can debounce almost anything you want: input, search, render, functional components, fetch, api calls, ... It works with react and react-native.

Easy: Think In React not JS. Most other solution work with functions, but this is a <Component>. It makes the code easier to understand and less error-prone. Just put what you want to debounce inside <Debounce>here</Debounce> of your render function and you're good.

Install

npm install react-debounce-component --save

or use yarn.

Examples

Example 1

This is the most simple example. It just debounces the output of <input> for one second.

import React from 'react';
import Debounce from 'react-debounce-component';

class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {value: 'Hello'}
  }
  render () {
    return (
      <div>
        <input value={this.state.value} onChange={(event) => {this.setState({value: event.target.value})}}/>
        <Debounce ms={1000}>
          <div>{this.state.value}</div>
        </Debounce>
      </div>
    );
  }
}

export default App;

Example 2

This is a more common scenario, where a list gets fetched from the web.

Expand

import React from 'react';
import Debounce from 'react-debounce-component';

class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {value: ''}
  }
  render () {
    return (
      <div>
        <input value={this.state.value} onChange={event => this.setState({value: event.target.value})}/>
        <Debounce ms={1000}>
          <List search={this.state.value}/>
        </Debounce>
      </div>
    );
  }
}

class List extends React.Component {
  constructor (props) {
    super(props);
    this.state = {items: []};
  }
  componentDidUpdate (prevProps) {
    if (prevProps !== this.props) { // Prevent rendering after setState()
      fetch('https://api.publicapis.org/entries?title=' + this.props.search)
        .then(res => res.json())
        .then(result => this.setState({items: result.entries || []}));
    }
  }
  render () {
    return (
      <ul>
        {this.state.items.map(item => (
          <li key={item.Link}>
            {item.API} {item.Link}
          </li>
        ))}
      </ul>
    );
  }
}

export default App;

Props

ms

Time to wait (delay) in milliseconds until the component inside <Debounce> gets rendered.


required	no
default	250
type	number

initialComponent

What to display on first render (mount). Default is to render the children immediately (e.g. fetch immediately)

Tip: put in null to prevent rendering the children on mount


required	no
default	children
type	component

Supports React version 16.0.0 and higher. Should even work with 0.13.0 and higher.

License

react-debounce-component is MIT licensed.