https://github.com/axross/redebounce

↘️ Render Props component to debounce the given value
https://github.com/axross/redebounce

debounce react render-props

Last synced: about 1 month ago
JSON representation

↘️ Render Props component to debounce the given value

• Host: GitHub
• URL: https://github.com/axross/redebounce
• Owner: axross
• License: mit
• Created: 2018-08-01T19:13:02.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-20T01:20:41.000Z (over 5 years ago)
• Last Synced: 2024-05-09T05:22:47.202Z (about 2 months ago)
• Topics: debounce, react, render-props
• Language: TypeScript
• Homepage:
• Size: 57.6 KB
• Stars: 14
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-react-render-props - redebounce
• awesome-react-render-props - redebounce

README

        
# ![Redebounce](https://user-images.githubusercontent.com/4289883/43543985-7b6b50e0-9586-11e8-8b44-b1a4bb3cb665.png)

[![npm](https://img.shields.io/npm/dt/redebounce.svg)](https://www.npmjs.com/package/redebounce)

[![GitHub stars](https://img.shields.io/github/stars/axross/redebounce.svg)](https://github.com/axross/redebounce/stargazers)

[![GitHub license](https://img.shields.io/github/license/axross/redebounce.svg)](https://github.com/axross/redebounce/blob/master/LICENSE)

[Render Props](https://reactjs.org/docs/render-props.html) component to debounce the given value.

- 🚀 Dependency free

- 🏄‍ Extremely tiny

- 🔌 Plug and Play

- 👷 Well tested

- 👔 Built with TypeScript

## Example

[TRY IT OUT HERE](https://codesandbox.io/s/qz0w3088y4)

[![Redebounce Example](https://user-images.githubusercontent.com/4289883/43624324-6c06e6d0-969b-11e8-8213-39a69b96760f.gif)](https://codesandbox.io/s/qz0w3088y4)

## Install

```

npm i -S redebounce

```

## APIs

### ``

#### 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

```js

import Redebounce from 'redebounce';

class WaitFor600ms extends PureComponent {

  state = { value: '' };

  render() {

    return (

      


        


        

          {value => }

        

      

    );

  }


  onChangeInput = e => {

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

  };

}

```

## License

MIT

## Contribute

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