@ttoss/react-hooks 2.0.9 → 2.0.10

package/README.md

@@ -2,35 +2,15 @@
 
 ## 📚 About
 
-**@ttoss/react-hooks** is an easy way to use Utility Hooks in your React application.
+**@ttoss/react-hooks** is a collection of custom React hooks that can be used to simplify the development of React applications.
 
-## 🚀 Getting Started
+## Installation
 
-### Installing @ttoss/react-hooks
-
-```shell
-$ yarn add @ttoss/react-hooks
-# or
-$ npm install @ttoss/react-hooks
+```bash
+pnpm add @ttoss/react-hooks
 ```
 
-## 📄 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';
-
-export const ComponentWithScript = () => {
-  const url = 'https://your-domain.com/bundle-api.js';
-  const { status } = useScript(url);
-
-  return <div>{status === 'ready' ? 'Script loaded' : 'Loading'}</div>;
-};
-```
+## API
 
 ### useDebounce
 
@@ -55,20 +35,50 @@ export const DebouncedInputComponent = () => {
 };
 ```
 
-## 📘 Types
+### useLocalStorage
 
-### useScript
+The `useLocalStorage` hook is used to store and retrieve values from the local storage.
+
+```tsx
+import * as React from 'react';
+import { useLocalStorage } from '@ttoss/react-hooks';
 
-```ts
-type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
+export const LocalStorageComponent = () => {
+  const [value, setValue] = useLocalStorage('key', 'default value');
 
-const useScript: (src: string) => {
-  status: ScriptStatus;
+  return (
+    <div>
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        placeholder="Type to save..."
+      />
+    </div>
+  );
 };
 ```
 
-### useDebounce
+It uses the `localStorage` storage by default, but you can also use the `sessionStorage` storage by passing the `Storage` option.
+
+```tsx
+const [value, setValue] = useLocalStorage('key', 'default value', {
+  storage: window.sessionStorage,
+});
+```
+
+### useScript
+
+The `useScript` hook is used to load external scripts into your React component.
 
-```ts
-const useDebounce: <T>(value: T, delay?: number) => T;
+```tsx
+import React from 'react';
+import { useScript } from '@ttoss/react-hooks';
+
+export const ComponentWithScript = () => {
+  const url = 'https://your-domain.com/bundle-api.js';
+  const { status } = useScript(url);
+
+  return <div>{status === 'ready' ? 'Script loaded' : 'Loading'}</div>;
+};
 ```

package/dist/esm/index.js

@@ -1,10 +1,25 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 
-// src/useScript.ts
+// src/useDebounce.ts
 import * as React from "react";
-var useScript = src => {
-  const [status, setStatus] = React.useState(src ? "loading" : "idle");
+var useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
   React.useEffect(() => {
+    const timer = setTimeout(() => {
+      return setDebouncedValue(value);
+    }, delay || 500);
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};
+
+// src/useScript.ts
+import * as React2 from "react";
+var useScript = src => {
+  const [status, setStatus] = React2.useState(src ? "loading" : "idle");
+  React2.useEffect(() => {
     if (!src) {
       setStatus("idle");
       return;
@@ -47,18 +62,98 @@ var useScript = src => {
   };
 };
 
-// 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);
+// src/useStorage.ts
+import * as React3 from "react";
+function useStorage(key, defaultValue, options) {
+  const opts = React3.useMemo(() => {
+    return {
+      serializer: JSON.stringify,
+      parser: JSON.parse,
+      // eslint-disable-next-line no-console
+      logger: console.log,
+      syncData: true,
+      ...options
+    };
+  }, [options]);
+  const {
+    serializer,
+    parser,
+    logger,
+    syncData,
+    storage
+  } = opts;
+  const effectiveStorage = storage ?? (typeof window !== "undefined" ? window.localStorage : void 0);
+  const rawValueRef = React3.useRef(null);
+  const [value, setValue] = React3.useState(() => {
+    if (typeof window === "undefined" || !effectiveStorage) {
+      return defaultValue;
+    }
+    try {
+      rawValueRef.current = effectiveStorage.getItem(key);
+      const res = rawValueRef.current ? parser(rawValueRef.current) : defaultValue;
+      return res;
+    } catch (e) {
+      logger(e);
+      return defaultValue;
+    }
+  });
+  React3.useEffect(() => {
+    if (typeof window === "undefined" || !effectiveStorage) {
+      return;
+    }
+    const updateLocalStorage = () => {
+      if (value !== void 0) {
+        const newValue = serializer(value);
+        const oldValue = rawValueRef.current;
+        rawValueRef.current = newValue;
+        effectiveStorage.setItem(key, newValue);
+        window.dispatchEvent(new StorageEvent("storage", {
+          storageArea: effectiveStorage,
+          url: window.location.href,
+          key,
+          newValue,
+          oldValue
+        }));
+      } else {
+        effectiveStorage.removeItem(key);
+        window.dispatchEvent(new StorageEvent("storage", {
+          storageArea: effectiveStorage,
+          url: window.location.href,
+          key
+        }));
+      }
+    };
+    try {
+      updateLocalStorage();
+    } catch (e) {
+      logger(e);
+    }
+  }, [key, logger, serializer, effectiveStorage, value]);
+  React3.useEffect(() => {
+    if (!syncData) {
+      return;
+    }
+    const handleStorageChange = e => {
+      if (e.key !== key || e.storageArea !== effectiveStorage) {
+        return;
+      }
+      try {
+        if (e.newValue !== rawValueRef.current) {
+          rawValueRef.current = e.newValue;
+          setValue(e.newValue ? parser(e.newValue) : void 0);
+        }
+      } catch (e2) {
+        logger(e2);
+      }
+    };
+    if (typeof window === "undefined") {
+      return;
+    }
+    window.addEventListener("storage", handleStorageChange);
     return () => {
-      clearTimeout(timer);
+      return window.removeEventListener("storage", handleStorageChange);
     };
-  }, [value, delay]);
-  return debouncedValue;
-};
-export { useDebounce, useScript };
+  }, [key, logger, parser, effectiveStorage, syncData]);
+  return [value, setValue];
+}
+export { useDebounce, useScript, useStorage };

package/dist/index.d.ts

@@ -1,3 +1,7 @@
+import * as React from 'react';
+
+declare const useDebounce: <T>(value: T, delay?: number) => T;
+
 type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
 /**
  * https://usehooks.com/useScript/
@@ -9,6 +13,17 @@ declare const useScript: (src: string) => {
     status: ScriptStatus;
 };
 
-declare const useDebounce: <T>(value: T, delay?: number) => T;
+type Serializer<T> = (object: T | undefined) => string;
+type Parser<T> = (val: string) => T | undefined;
+type Setter<T> = React.Dispatch<React.SetStateAction<T | undefined>>;
+type Options<T> = Partial<{
+    serializer: Serializer<T>;
+    parser: Parser<T>;
+    logger: (error: any) => void;
+    syncData: boolean;
+    storage?: Storage;
+}>;
+declare function useStorage<T>(key: string, defaultValue: T, options?: Options<T>): [T, Setter<T>];
+declare function useStorage<T>(key: string, defaultValue?: undefined, options?: Options<T>): [T | undefined, Setter<T>];
 
-export { type ScriptStatus, useDebounce, useScript };
+export { type ScriptStatus, useDebounce, useScript, useStorage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/react-hooks",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "React hooks.",
   "license": "MIT",
   "author": "ttoss",