use-debounce-hook-web 0.1.9 → 0.2.0

package/README.md

@@ -5,4 +5,100 @@ A lightweight, production-ready debounce hook for React applications. Designed t
 ## Install
 ```markdown
 npm i use-debounce-hook-web
-```
+```
+
+
+## Basic Usage
+```js
+useDebounce(value, delay)
+```
+
+```js
+import { useDebounce } from 'use-debounce-hook-web';
+import { useState } from 'react';
+
+const SearchInput = () => {
+  const [value, setValue] = useState('');
+
+  const debouncedValue = useDebounce(value, 500);
+
+  return (
+    <input
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      placeholder="Search..."
+    />
+  );
+};
+
+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                               |
+| -------- | ------- | ----------------------------------------- |
+| 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 |
+
+
+## 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.9",
+  "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",