https://github.com/freemagee/react-debounced-input
React form input with debounced behaviour
https://github.com/freemagee/react-debounced-input
controlled-components debounce debouncing input react reactjs
Last synced: 2 months ago
JSON representation
React form input with debounced behaviour
- Host: GitHub
- URL: https://github.com/freemagee/react-debounced-input
- Owner: freemagee
- Created: 2020-02-21T15:26:08.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T02:17:37.000Z (almost 2 years ago)
- Last Synced: 2025-01-21T03:42:37.902Z (about 1 year ago)
- Topics: controlled-components, debounce, debouncing, input, react, reactjs
- Language: JavaScript
- Size: 728 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Debounced Input
A react form input component that adds a "debounced" delay to input `onChange` events. This is a controlled element, so it must have a container component that passes props to it.
[Demo](https://freemagee.github.io/react-debounced-input/)
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
## Installation
The **DelayedInput** component is located in */src/*. It has no external dependencies. You can take either the DelayedInput *dir*, or the DelayedInput.js *file*.
## Usage
Example usage in an App:
```javascript
import React, { useState } from "react";
import { DelayedInput } from "./DelayedInput";
function App() {
const initialInput = "The initial input";
const [input, setInput] = useState(initialInput);
return (
);
}
export default App;
```
### Props
**DelayedInput** uses these props:
```javascript
DelayedInput.propTypes = {
type: PropTypes.string,
initialValue: PropTypes.string,
inputDelay: PropTypes.number,
placeHolder: PropTypes.string,
setInput: PropTypes.func.isRequired
};
```
Most props have a default value if they are not provided:
```
type = "text"
initialValue = ""
inputDelay = 300
placeHolder = ""
```
`setInput` is a callback function passed in as a prop from it's container component. That will feed back the new values and "lift state up".