@leexi/shared 0.1.0 → 0.2.0

package/dist/composables/index.d.ts

@@ -0,0 +1 @@
+export { useLocalStorage } from './useLocalStorage';

package/dist/composables/index.js

@@ -0,0 +1 @@
+export { useLocalStorage } from './useLocalStorage';

package/dist/composables/useLocalStorage.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Creates a reactive pointer to a specific localStorage value.
+ * The value is stored in the localStorage as a JSON stringified data to enable parsing primitives and objects
+ *
+ * @param  key - a key pointing to a localStorage value
+ * @param  defaultValue - an optional default value used if the localStorage value is undefined
+ * @returns a reactive variable pointing to that localStorage value
+ *
+ * @example
+ * const fooOne = useLocalStorage('foo')
+ * const fooTwo = useLocalStorage('foo', 'bar')
+ * fooOne.value // => 'bar'
+ * localStorage.foo // => '"bar"'
+ */
+export declare const useLocalStorage: <T>(key: string, defaultValue?: T) => any;

package/dist/composables/useLocalStorage.js

@@ -0,0 +1,27 @@
+import { useState, watch } from '#imports';
+/**
+ * Creates a reactive pointer to a specific localStorage value.
+ * The value is stored in the localStorage as a JSON stringified data to enable parsing primitives and objects
+ *
+ * @param  key - a key pointing to a localStorage value
+ * @param  defaultValue - an optional default value used if the localStorage value is undefined
+ * @returns a reactive variable pointing to that localStorage value
+ *
+ * @example
+ * const fooOne = useLocalStorage('foo')
+ * const fooTwo = useLocalStorage('foo', 'bar')
+ * fooOne.value // => 'bar'
+ * localStorage.foo // => '"bar"'
+ */
+export const useLocalStorage = (key, defaultValue) => {
+    const data = useState(key, () => JSON.parse(localStorage?.getItem(key) || 'null') || defaultValue);
+    watch(data, () => {
+        if (data.value) {
+            localStorage?.setItem(key, JSON.stringify(data.value));
+        }
+        else {
+            localStorage?.removeItem(key);
+        }
+    }, { immediate: true });
+    return data;
+};