@ttoss/react-hooks 1.24.6 → 1.25.1

package/README.md

@@ -1,37 +1,64 @@
-# @ttoss/hooks
+# @ttoss/react-hooks
 
 ## 📚 About
 
-<strong> @ttoss/hooks</strong> is a easiest way to use Util Hooks in your React application.
+**@ttoss/react-hooks** is an easy way to use Utility Hooks in your React application.
 
 ## 🚀 Getting Started
 
-### Install @ttoss/hooks
+### Installing @ttoss/react-hooks
 
 ```shell
-$ yarn add @ttoss/hooks
+$ yarn add @ttoss/react-hooks
 # or
-$ npm install @ttoss/hooks
+$ npm install @ttoss/react-hooks
 ```
 
-## 📄 Examples of use
+## 📄 Usage Examples
+
+### useScript
+
+The `useScript` hook is used to load external scripts into your React component.
 
 ```tsx
 import React from 'react';
+import { useScript } from '@ttoss/react-hooks';
 
-import { useScript } from '@ttoss/hooks';
-
-export const Component = () => {
+export const ComponentWithScript = () => {
   const url = 'https://your-domain.com/bundle-api.js';
-
   const { status } = useScript(url);
 
-  return <div>{status === 'ready' ? 'Ok' : 'Loading'}</div>;
+  return <div>{status === 'ready' ? 'Script loaded' : 'Loading'}</div>;
+};
+```
+
+### useDebounce
+
+The `useDebounce` hook is used to delay the update of a value for a specific amount of time.
+
+```tsx
+import React, { useState } from 'react';
+import { useDebounce } from '@ttoss/react-hooks';
+
+export const DebouncedInputComponent = () => {
+  const [inputValue, setInputValue] = useState('');
+  const debouncedValue = useDebounce(inputValue, 500);
+
+  return (
+    <input
+      type="text"
+      value={inputValue}
+      onChange={(e) => setInputValue(e.target.value)}
+      placeholder="Type to search..."
+    />
+  );
 };
 ```
 
 ## 📘 Types
 
+### useScript
+
 ```ts
 type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
 
@@ -39,3 +66,9 @@ const useScript: (src: string) => {
   status: ScriptStatus;
 };
 ```
+
+### useDebounce
+
+```ts
+const useDebounce: <T>(value: T, delay?: number) => T;
+```

package/dist/esm/index.js

@@ -46,4 +46,19 @@ var useScript = src => {
     status
   };
 };
-export { useScript };
+
+// src/useDebounce.ts
+import * as React2 from "react";
+var useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = React2.useState(value);
+  React2.useEffect(() => {
+    const timer = setTimeout(() => {
+      return setDebouncedValue(value);
+    }, delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};
+export { useDebounce, useScript };

package/dist/index.d.mts

@@ -9,4 +9,6 @@ declare const useScript: (src: string) => {
     status: ScriptStatus;
 };
 
-export { type ScriptStatus, useScript };
+declare const useDebounce: <T>(value: T, delay?: number) => T;
+
+export { type ScriptStatus, useDebounce, useScript };

package/dist/index.d.ts

@@ -9,4 +9,6 @@ declare const useScript: (src: string) => {
     status: ScriptStatus;
 };
 
-export { type ScriptStatus, useScript };
+declare const useDebounce: <T>(value: T, delay?: number) => T;
+
+export { type ScriptStatus, useDebounce, useScript };

package/dist/index.js

@@ -38,6 +38,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  useDebounce: () => useDebounce,
   useScript: () => useScript
 });
 module.exports = __toCommonJS(src_exports);
@@ -88,7 +89,23 @@ var useScript = src => {
     status
   };
 };
+
+// src/useDebounce.ts
+var React2 = __toESM(require("react"));
+var useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = React2.useState(value);
+  React2.useEffect(() => {
+    const timer = setTimeout(() => {
+      return setDebouncedValue(value);
+    }, delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  useDebounce,
   useScript
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-hooks",
-  "version": "1.24.6",
+  "version": "1.25.1",
   "description": "React hooks.",
   "author": "ttoss",
   "contributors": [

package/src/index.ts

@@ -1 +1,2 @@
 export { useScript, ScriptStatus } from './useScript';
+export { useDebounce } from './useDebounce';

package/src/useDebounce.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export const useDebounce = <T>(value: T, delay?: number): T => {
+  const [debouncedValue, setDebouncedValue] = React.useState<T>(value);
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      return setDebouncedValue(value);
+    }, delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};