react-input-debounce 1.0.6 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +99 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,99 @@
|
|
|
1
|
-
#
|
|
1
|
+
# react input debounce [](https://www.npmjs.com/package/react-input-debounce) [](LICENSE) [](https://github.com/Bexet/react-input-debounce)
|
|
2
|
+
|
|
3
|
+
Version 1.0.6
|
|
4
|
+
|
|
5
|
+
`react input debounce` provides a simple and efficient React component to debounce the `onChange` event of a standard HTML input element. This prevents excessive re-renders or API calls while a user is actively typing, improving performance and user experience.
|
|
6
|
+
|
|
7
|
+
## ✨ Features
|
|
8
|
+
|
|
9
|
+
* **Debounced `onChange` Event**: Automatically debounces the `onChange` event of an input field, triggering your handler only after a specified delay.
|
|
10
|
+
* **Configurable Debounce Timeout**: Easily customize the debounce delay using the `debounceTimeout` prop.
|
|
11
|
+
* **Standard Input Compatibility**: Supports all standard HTML `<input>` attributes and props.
|
|
12
|
+
* **TypeScript Support**: Built with TypeScript for a robust and type-safe development experience.
|
|
13
|
+
|
|
14
|
+
## 📦 Installation
|
|
15
|
+
|
|
16
|
+
Install the package using npm or yarn:
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install react-input-debounce
|
|
20
|
+
|
|
21
|
+
# or
|
|
22
|
+
yarn add react-input-debounce
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## 🚀 Usage
|
|
26
|
+
|
|
27
|
+
Integrate `DebounceInput` into your React components just like a regular `<input>` element. Provide an `onChange` handler and an optional `debounceTimeout` (defaults to `100ms`).
|
|
28
|
+
|
|
29
|
+
```typescript
|
|
30
|
+
import React, { ChangeEvent, useState } from 'react';
|
|
31
|
+
import { DebounceInput, DebounceInputProps } from 'react-input-debounce';
|
|
32
|
+
|
|
33
|
+
function MyDebouncedForm() {
|
|
34
|
+
const [searchValue, setSearchValue] = useState('');
|
|
35
|
+
const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
|
|
36
|
+
const [timeout, setTimeout] = useState(500);
|
|
37
|
+
|
|
38
|
+
// This handler receives the *debounced* change event
|
|
39
|
+
const handleDebouncedChange = (event: ChangeEvent<HTMLInputElement>) => {
|
|
40
|
+
console.log('Debounced value:', event.target.value);
|
|
41
|
+
setDebouncedSearchValue(event.target.value);
|
|
42
|
+
// You would typically perform an API call or expensive operation here
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
// This handler receives the *immediate* change event for display purposes
|
|
46
|
+
const handleImmediateChange = (event: ChangeEvent<HTMLInputElement>) => {
|
|
47
|
+
setSearchValue(event.target.value);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
return (
|
|
51
|
+
<div>
|
|
52
|
+
<h1>Search with Debounce</h1>
|
|
53
|
+
<div>
|
|
54
|
+
<label htmlFor="debounce-timeout">Debounce Timeout (ms): </label>
|
|
55
|
+
<input
|
|
56
|
+
id="debounce-timeout"
|
|
57
|
+
type="number"
|
|
58
|
+
value={timeout}
|
|
59
|
+
onChange={(e) => setTimeout(Number(e.target.value))}
|
|
60
|
+
style={{ marginBottom: '15px' }}
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<label htmlFor="search-input">Search Term:</label>
|
|
65
|
+
<DebounceInput
|
|
66
|
+
id="search-input"
|
|
67
|
+
type="text"
|
|
68
|
+
placeholder="Type to search..."
|
|
69
|
+
debounceTimeout={timeout} // Dynamic timeout example
|
|
70
|
+
onChange={handleDebouncedChange}
|
|
71
|
+
// All other standard input props are passed through
|
|
72
|
+
className="my-custom-input"
|
|
73
|
+
style={{ width: '300px', padding: '8px' }}
|
|
74
|
+
/>
|
|
75
|
+
|
|
76
|
+
<p>Immediate input value: **{searchValue}**</p>
|
|
77
|
+
<p>Debounced search value: **{debouncedSearchValue}**</p>
|
|
78
|
+
</div>
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
export default MyDebouncedForm;
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Props
|
|
86
|
+
|
|
87
|
+
The `DebounceInput` component accepts all standard `InputHTMLAttributes<HTMLInputElement>` in addition to the following specific prop:
|
|
88
|
+
|
|
89
|
+
| Prop | Type | Default | Description |
|
|
90
|
+
| :---------------- | :------- | :------ | :------------------------------------------------------ |
|
|
91
|
+
| `debounceTimeout` | `number` | `100` | The delay in milliseconds before the `onChange` event is fired. |
|
|
92
|
+
|
|
93
|
+
## 🤝 Contributing
|
|
94
|
+
|
|
95
|
+
Contributions are welcome! Feel free to open issues or pull requests on the [GitHub repository](https://github.com/Bexet/react-input-debounce).
|
|
96
|
+
|
|
97
|
+
## 📄 License
|
|
98
|
+
|
|
99
|
+
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
|