use-debounce-hook-web 0.1.10 → 0.2.0

package/README.md

@@ -8,6 +8,11 @@ npm i use-debounce-hook-web
 ```
 
 
+## Basic Usage
+```js
+useDebounce(value, delay)
+```
+
 ```js
 import { useDebounce } from 'use-debounce-hook-web';
 import { useState } from 'react';
@@ -29,6 +34,56 @@ const SearchInput = () => {
 export default SearchInput;
 ```
 
+## Advanced Usage
+```js
+useDebounce(value, delay, options)
+```
+
+```js
+const debouncedValue = useDebounce(value, 500, {
+  immediate: true,
+  maxWait: 2000
+});
+```
+```js
+const debouncedValue = useDebounce(value, 500, {
+  maxWait: 2000
+});
+```
+
+```js 
+import { useEffect, useState } from "react";
+import { useDebounce } from "react-use-debounce";
+
+function SearchUsers() {
+  const [query, setQuery] = useState("");
+  const debouncedQuery = useDebounce(query, 500, {
+    immediate: true,
+    maxWait: 2000
+  });
+
+  useEffect(() => {
+    if (!debouncedQuery) return;
+
+    fetch(`https://api.example.com/users?q=${debouncedQuery}`)
+      .then(res => res.json())
+      .then(data => console.log(data));
+  }, [debouncedQuery]);
+
+  return (
+    <input
+      placeholder="Search users..."
+      value={query}
+      onChange={(e) => setQuery(e.target.value)}
+    />
+  );
+}
+
+export default SearchUsers;
+
+```
+
+
 
 ## Options
 | Property | Type    | Description                               |
@@ -36,4 +91,14 @@ export default SearchInput;
 | value    | any     | The value to debounce                     |
 | delay    | number  | Debounce delay in milliseconds            |
 | leading  | boolean | Execute immediately on first trigger      |
-| maxWait  | number  | Maximum wait time before forced execution |
+| maxWait  | number  | Maximum wait time before forced execution |
+
+
+## More Use Options 
+| Use Case      | immediate | maxWait |
+| ------------- | --------- | ------- |
+| Search UX     | ✅ Yes     | ✅ Yes   |
+| Auto-save     | ❌ No      | ✅ Yes   |
+| Filtering     | ❌ No      | ❌ No    |
+| Resize events | ❌ No      | ❌ No    |
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-debounce-hook-web",
-  "version": "0.1.10",
+  "version": "0.2.0",
   "description": "A simple and reusable debounce hook for React",
   "main": "src/index.js",
   "publishConfig": {
@@ -15,7 +15,10 @@
     "debounce",
     "hook",
     "react-hooks",
-    "useDebounce"
+    "useDebounce",
+    "useEffect",
+    "nextjs",
+    "frontend"
   ],
   "author": "Yogesh Negi",
   "license": "MIT",