0.5.0 • Published 6 years ago
react-debouncer v0.5.0
react-debouncer
Enables easy debouncing of change events while still presenting a responsive UI. See the styleguide for full component documentation.
Usage
Install using yarn or npm:
yarn install react-debouncer
Since this is a typescript-first project, typings are included in the package.
Wrap your component in <Debouncer />
by passing it into component
, or implement a render<T>(value: T, onChange: (newValue: T) => void)
function.
For the common case of debouncing a text input, you can use <DebouncedInput />
(docs). This is also an example implementation of <Debouncer />
.
Example usage (see it in action):
import * as React from 'react';
import { DebouncedInput, OnChangeHandler } from 'react-debouncer';
class DebounceDisplay extends React.PureComponent<{}, { value: string }> {
public constructor(p: {}) {
super(p);
this.state = { value: 'initial value' };
}
public render() {
return (
<React.Fragment>
<DebouncedInput value={this.state.value} onChange={this.onChange} />
<br />
Global state value: {this.state.value}
</React.Fragment>
);
}
private onChange = (newVal: string) => {
this.setState({ value: newVal });
};
}
Development
Run yarn start:styleguide
to start the styleguidist server and open the url it mentions
License
MIT License, Andrew Varnerin 2018.