@atomicjolt/hooks - npm Package Compare versions

Comparing version 0.3.2 to 0.3.3

dist/hooks/webStorage.js

@@ -1,3 +0,2 @@
-import { useState } from 'react';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+import { useState } from "react";
 const DEFAULTS = {
@@ -8,7 +7,11 @@ prepare: JSON.stringify,
 /** Factory function for `useLocalStroage` and `useSessionStorage` */
-export function makeStorageHook(storage) {
-    return (initialState, key, options = {}) => {
-        const { prepare, parse } = { ...DEFAULTS, ...options };
+export function makeStorageHook(storage, options = {}) {
+    return (key, initialState) => {
+        const { prepare, parse, prefix = "", } = {
+            ...DEFAULTS,
+            ...options,
+        };
+        const keyWithPrefix = `${prefix}${key}`;
         const [state, setState] = useState(() => {
-            const cached = storage.getItem(key);
+            const cached = storage.getItem(keyWithPrefix);
             if (cached) {
@@ -21,5 +24,5 @@ return parse(cached);
             setState(value);
-            storage.setItem(key, prepare(value));
+            storage.setItem(keyWithPrefix, prepare(value));
         };
-        const remove = () => storage.removeItem(key);
+        const remove = () => storage.removeItem(keyWithPrefix);
         return [state, setStateWrapper, remove];
@@ -31,7 +34,4 @@ };
  * `initialState`.
+ * @param key - a unique key to set and access the value with
  * @param initialState - initial state value
- * @param key - a unique key to set and access the value with
- * @param options - optional arguments
- *  - `prepare`: How to encode the data as a string to store. By default, it uses JSON.stringify
- *  - `parse`: How to decode a value retreived from storage. By default, it uses JSON.parse
  * @returns an array of:
@@ -46,7 +46,4 @@ * - The state value
  * `initialState`.
+ * @param key - a unique key to set and access the value with
  * @param initialState - initial state value
- * @param key - a unique key to set and access the value with
- * @param options - optional arguments
- *  - `prepare`: How to encode the data as a string to store. By default, it uses JSON.stringify
- *  - `parse`: How to decode a value retreived from storage. By default, it uses JSON.parse
  * @returns an array of:
@@ -53,0 +50,0 @@ * - The state value

dist/hooks/webStorage.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"webStorage.js","sourceRoot":"","sources":["../../src/hooks/webStorage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,QAAQ,EAAE,MAAM,OAAO,CAAC;AAa3C,8DAA8D;AAC9D,MAAM,QAAQ,GAAgC;IAC5C,OAAO,EAAE,IAAI,CAAC,SAAS;IACvB,KAAK,EAAE,IAAI,CAAC,KAAK;CAClB,CAAC;AAEF,qEAAqE;AACrE,MAAM,UAAU,eAAe,CAAgC,OAAsC;IACnG,OAAO,CACL,YAAe,EACf,GAAQ,EACR,UAA8C,EAAE,EACO,EAAE;QACzD,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAA8B,EAAE,GAAG,QAAQ,EAAE,GAAG,OAAO,EAA+B,CAAC;QAE/G,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAI,GAAG,EAAE;YACzC,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YACpC,IAAI,MAAM,EAAE,CAAC;gBACX,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;YACvB,CAAC;YACD,OAAO,YAAY,CAAC;QACtB,CAAC,CAAC,CAAC;QAEH,MAAM,eAAe,GAAG,CAAC,KAAQ,EAAE,EAAE;YACnC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;QACvC,CAAC,CAAC;QAEF,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;QAE7C,OAAO,CAAC,KAAK,EAAE,eAAe,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;AAE7D;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"webStorage.js","sourceRoot":"","sources":["../../src/hooks/webStorage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,QAAQ,EAAE,MAAM,OAAO,CAAC;AAc3C,MAAM,QAAQ,GAA6B;IACzC,OAAO,EAAE,IAAI,CAAC,SAAS;IACvB,KAAK,EAAE,IAAI,CAAC,KAAK;CAClB,CAAC;AAEF,qEAAqE;AACrE,MAAM,UAAU,eAAe,CAC7B,OAAyC,EACzC,UAAgD,EAAE;IAElD,OAAO,CACL,GAAW,EACX,YAAe,EACwC,EAAE;QACzD,MAAM,EACJ,OAAO,EACP,KAAK,EACL,MAAM,GAAG,EAAE,GACZ,GAA8B;YAC7B,GAAG,QAAQ;YACX,GAAG,OAAO;SACkB,CAAC;QAE/B,MAAM,aAAa,GAAG,GAAG,MAAM,GAAG,GAAG,EAAE,CAAC;QAExC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAI,GAAG,EAAE;YACzC,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;YAC9C,IAAI,MAAM,EAAE,CAAC;gBACX,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;YACvB,CAAC;YACD,OAAO,YAAY,CAAC;QACtB,CAAC,CAAC,CAAC;QAEH,MAAM,eAAe,GAAG,CAAC,KAAQ,EAAE,EAAE;YACnC,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,OAAO,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;QACjD,CAAC,CAAC;QAEF,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;QAEvD,OAAO,CAAC,KAAK,EAAE,eAAe,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC,CAAC;AACJ,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;AAE7D;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC"}

dist/types/hooks/webStorage.d.ts

@@ -1,21 +0,19 @@
-import { Dispatch } from 'react';
-interface OptionalParams<T, S> {
-    prepare: (value: T) => S;
-    parse: (value: S) => T;
+import { Dispatch } from "react";
+interface OptionalParams<InputFormat, OutputFormat> {
+    prepare: (value: InputFormat) => OutputFormat;
+    parse: (value: OutputFormat) => InputFormat;
+    prefix?: string;
 }
-interface StorageInterface<K, S> {
-    getItem(key: K): S;
-    setItem(key: K, value: S): void;
-    removeItem(key: K): void;
+interface StorageInterface<Key, Value> {
+    getItem(key: Key): Value;
+    setItem(key: Key, value: Value): void;
+    removeItem(key: Key): void;
 }
 /** Factory function for `useLocalStroage` and `useSessionStorage` */
-export declare function makeStorageHook<Key = string, Stored = string>(storage: StorageInterface<Key, Stored>): <T>(initialState: T, key: Key, options?: Partial<OptionalParams<T, Stored>>) => [state: T, setState: Dispatch<T>, remove: () => void];
+export declare function makeStorageHook<Stored = string>(storage: StorageInterface<string, Stored>, options?: Partial<OptionalParams<any, Stored>>): <T>(key: string, initialState: T) => [state: T, setState: Dispatch<T>, remove: () => void];
 /** Control a `localStorage` value as a React state value. Setting the value will also write it to `localStorage`.
  * Upon a reload, if the `key` exisits in `localStorage`, the value will be loaded and used as the initial state, instead of
  * `initialState`.
+ * @param key - a unique key to set and access the value with
  * @param initialState - initial state value
- * @param key - a unique key to set and access the value with
- * @param options - optional arguments
- *  - `prepare`: How to encode the data as a string to store. By default, it uses JSON.stringify
- *  - `parse`: How to decode a value retreived from storage. By default, it uses JSON.parse
  * @returns an array of:
@@ -26,11 +24,8 @@ * - The state value
  */
-export declare const useLocalStorage: <T>(initialState: T, key: string, options?: Partial<OptionalParams<T, string | null>>) => [state: T, setState: Dispatch<T>, remove: () => void];
+export declare const useLocalStorage: <T>(key: string, initialState: T) => [state: T, setState: Dispatch<T>, remove: () => void];
 /** Control a `sessionStorage` value as a React state value. Setting the value will also write it to `sessionStorage`
  * upon a reload, if the `key` exisits in `sessionStorage`, the value will be loaded and used as the initial State, instead of
  * `initialState`.
+ * @param key - a unique key to set and access the value with
  * @param initialState - initial state value
- * @param key - a unique key to set and access the value with
- * @param options - optional arguments
- *  - `prepare`: How to encode the data as a string to store. By default, it uses JSON.stringify
- *  - `parse`: How to decode a value retreived from storage. By default, it uses JSON.parse
  * @returns an array of:
@@ -41,3 +36,3 @@ * - The state value
  */
-export declare const useSessionStorage: <T>(initialState: T, key: string, options?: Partial<OptionalParams<T, string | null>>) => [state: T, setState: Dispatch<T>, remove: () => void];
+export declare const useSessionStorage: <T>(key: string, initialState: T) => [state: T, setState: Dispatch<T>, remove: () => void];
 export {};

package.json

 {
   "name": "@atomicjolt/hooks",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "author": "Sean Collings <[e-mail]>",
@@ -15,8 +15,8 @@ "license": "MIT",
   "peerDependencies": {
-    "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.8",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
+    "@types/react": "^19.0.8",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "ts-node": "^10.7.0"
@@ -23,0 +23,0 @@ },

README.md

@@ -17,3 +17,3 @@ # Atomic Hooks
 
-[Docs can be found here](https://atomicjolt.github.io/react-hooks/)
+[Docs can be found here](https://atomicjolt.github.io/atomic-libs/hooks)
 
@@ -20,0 +20,0 @@ ## Usage

src/hooks/webStorage.ts

@@ -1,16 +0,16 @@
-import { Dispatch, useState } from 'react';
+import { Dispatch, useState } from "react";
 
-interface OptionalParams<T, S> {
-  prepare: (value: T) => S;
-  parse: (value: S) => T;
+interface OptionalParams<InputFormat, OutputFormat> {
+  prepare: (value: InputFormat) => OutputFormat;
+  parse: (value: OutputFormat) => InputFormat;
+  prefix?: string;
 }
 
-interface StorageInterface<K, S> {
-  getItem(key: K): S;
-  setItem(key: K, value: S): void;
-  removeItem(key: K): void;
+interface StorageInterface<Key, Value> {
+  getItem(key: Key): Value;
+  setItem(key: Key, value: Value): void;
+  removeItem(key: Key): void;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const DEFAULTS: OptionalParams<any, string> = {
+const DEFAULTS: OptionalParams<any, any> = {
   prepare: JSON.stringify,
@@ -21,12 +21,23 @@ parse: JSON.parse,
 /** Factory function for `useLocalStroage` and `useSessionStorage` */
-export function makeStorageHook<Key = string, Stored = string>(storage: StorageInterface<Key, Stored>) {
+export function makeStorageHook<Stored = string>(
+  storage: StorageInterface<string, Stored>,
+  options: Partial<OptionalParams<any, Stored>> = {}
+) {
   return <T>(
-    initialState: T,
-    key: Key,
-    options: Partial<OptionalParams<T, Stored>> = {},
+    key: string,
+    initialState: T
   ): [state: T, setState: Dispatch<T>, remove: () => void] => {
-    const { prepare, parse }: OptionalParams<T, Stored> = { ...DEFAULTS, ...options } as OptionalParams<T, Stored>;
+    const {
+      prepare,
+      parse,
+      prefix = "",
+    }: OptionalParams<T, Stored> = {
+      ...DEFAULTS,
+      ...options,
+    } as OptionalParams<T, Stored>;
 
+    const keyWithPrefix = `${prefix}${key}`;
+
     const [state, setState] = useState<T>(() => {
-      const cached = storage.getItem(key);
+      const cached = storage.getItem(keyWithPrefix);
       if (cached) {
@@ -40,6 +51,6 @@ return parse(cached);
       setState(value);
-      storage.setItem(key, prepare(value));
+      storage.setItem(keyWithPrefix, prepare(value));
     };
 
-    const remove = () => storage.removeItem(key);
+    const remove = () => storage.removeItem(keyWithPrefix);
 
@@ -53,7 +64,4 @@ return [state, setStateWrapper, remove];
  * `initialState`.
+ * @param key - a unique key to set and access the value with
  * @param initialState - initial state value
- * @param key - a unique key to set and access the value with
- * @param options - optional arguments
- *  - `prepare`: How to encode the data as a string to store. By default, it uses JSON.stringify
- *  - `parse`: How to decode a value retreived from storage. By default, it uses JSON.parse
  * @returns an array of:
@@ -69,7 +77,4 @@ * - The state value
  * `initialState`.
+ * @param key - a unique key to set and access the value with
  * @param initialState - initial state value
- * @param key - a unique key to set and access the value with
- * @param options - optional arguments
- *  - `prepare`: How to encode the data as a string to store. By default, it uses JSON.stringify
- *  - `parse`: How to decode a value retreived from storage. By default, it uses JSON.parse
  * @returns an array of:
@@ -76,0 +81,0 @@ * - The state value

No alert changes

Worsened metrics

Total package byte prevSize

32779

-3.2%

Lines of code

598

-0.66%

No dependency changes