Render Props component to debounce the given value.

• 🚀 Dependency free
• 🏄‍ Extremely tiny
• 🔌 Plug and Play
• 👷 Well tested
• 👔 Built with TypeScript

Example

TRY IT OUT HERE

Install

npm i -S redebounce

APIs

<Redebounce>

Props

| Name | Type | Required | Description | | ---------- | ------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------- | | dueTime | number | ✓ | The timeout duration in milliseconds for the window of time to wait stopping changes of value and provide it to children | | value | T | ✓ | The value to provide to children. | | children | (value: T) => ReactNode | | A render props function which provides the value from value |

Usage

import Redebounce from 'redebounce';

class WaitFor600ms extends PureComponent {
  state = { value: '' };

  render() {
    return (
      <div>
        <input onChange={this.onChangeInput} />

        <Redebounce dueTime={600} value={this.state.value}>
          {value => <input value={value} />}
        </Redebounce>
      </div>
    );
  }

  onChangeInput = e => {
    this.setState({ value: e.currentTarget.value });
  };
}

License

MIT

Contribute

You can help improving this project leaving Pull requests and helping with Issues.