Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-debounce-component
Advanced tools
Readme
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.
npm install react-debounce-component --save
or use yarn.
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;
This is a more common scenario, where a list gets fetched from the web.
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;
Time to wait (delay) in milliseconds until the component inside <Debounce> gets rendered.
required | no |
default | 250 |
type | number |
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.
react-debounce-component is MIT licensed.
FAQs
Debounce input, search, render, functions or anything else with <Debounce/> in React and React Native
The npm package react-debounce-component receives a total of 210 weekly downloads. As such, react-debounce-component popularity was classified as not popular.
We found that react-debounce-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.