https://github.com/kitos/react-debounce-props
Tiny render-prop/HOC/hook component for props/state debouncing
https://github.com/kitos/react-debounce-props
debounce hoc hooks react render-props
Last synced: 5 months ago
JSON representation
Tiny render-prop/HOC/hook component for props/state debouncing
- Host: GitHub
- URL: https://github.com/kitos/react-debounce-props
- Owner: kitos
- License: mit
- Created: 2018-10-21T09:36:35.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T00:56:51.000Z (over 3 years ago)
- Last Synced: 2025-09-17T04:14:43.049Z (9 months ago)
- Topics: debounce, hoc, hooks, react, render-props
- Language: TypeScript
- Homepage:
- Size: 665 KB
- Stars: 4
- Watchers: 1
- Forks: 3
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-debounce-props
[](https://badge.fury.io/js/react-debounce-props)
[](https://travis-ci.com/kitos/react-debounce-props)
[](https://codecov.io/gh/kitos/react-debounce-props)
[](https://unpkg.com/react-debounce-props)
[](https://unpkg.com/react-debounce-props)
Tiny render-prop/HOC/hook component for props/state debouncing
## Install
### Using npm
`npm i react-debounce-props --save`
Then, use it as usual:
```JS
// using ES6 modules
import { Debounce } from 'react-debounce-props'
// using CommonJS modules
const { Debounce } = require('react-debounce-props')
```
### 1998 Script Tag (UMD build)
The UMD build is also available on [unpkg](https:/unpkg.com):
```HTML
```
The package is avalable on `window.ReactDebounceProps`
## Usage
### Hook
```JS
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { useDebounce } from "react-debounce-props";
let App = () => {
let [value, setValue] = useState("");
let debouncedValue = useDebounce(value, 250);
return (
setValue(e.target.value)}
placeholder="Type smth..."
/>
Normal value: {value}
Debounced value: {debouncedValue}
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
```
[](https://codesandbox.io/s/0483602w5l?autoresize=1&hidenavigation=1)
### render-prop
#### Debounce state
This lib can easily replace [react-debounce-input](https://github.com/nkbt/react-debounce-input) cause it is more generic.
```JS
import React from 'react'
import ReactDOM from 'react-dom'
import Debounce from 'react-debounce-props'
class App extends React.Component {
state = {}
render() {
return (
this.setState({ value: e.target.value })}
placeholder="Type smth..."
/>
Normal value: {this.state.value}
{({ debouncedValue }) => (
Debounced value: {debouncedValue}
)}
)
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
```
[](https://codesandbox.io/s/kx3wow4wmr?autoresize=1&fontsize=13&hidenavigation=1&moduleview=1)
#### Debounce props
You can also debounce props passed from parent components:
```JS
import Debounce from 'react-debounce-props'
let MyComponent = ({ frequentlyUpdatedProp }) => (
{({ lessFrequentlyUpdatedProp }) => (
{lessFrequentlyUpdatedProp}!
)}
)
```
as well as from other *render-props* (e.g. from new [React context](https://reactjs.org/docs/context.html#consumer)):
```JS
import Debounce from 'react-debounce-props'
let MyComponent = () => (
{frequentlyUpdatedProp => (
{({ lessFrequentlyUpdatedProp }) => (
{lessFrequentlyUpdatedProp}!
)}
)}
)
```
### High order component
Cause *render-props* approach is more powerful this lib can replace HOC of [react-debounced-props](https://github.com/saltycrane/react-debounced-props) as well.
Use `withDebouncedProps` for that:
```JS
import { withDebouncedProps } from 'react-debounce-props'
const MyDebouncedComponent = withDebouncedProps(
{ frequentlyUpdatedProp: 42 }, 200
)(MyComponent);
```
## Useful links
[Use a Render Prop!](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)
[downshift](https://github.com/paypal/downshift) 🏎