Merge pull request #6 from murageh/refactor#functions

Feature#Accomodate Next.js

README.md

@@ -43,6 +43,21 @@ If you do not pass this argument, the values will be set to an empty object, and
 The hook will also return the values from the local storage if they exist. If they do not exist, it will return the
 initial values, or an empty object if no initial values were passed.
 
+> Update: You can choose where to save the values. You can either save them to the local storage, or to the session storage.
+> To do this, pass a `storage` property to the object passed to the hook. The value of this property should be either
+> `localStorage` or `sessionStorage`. If you do not pass this property, the values will be saved to the local storage.
+> 
+> At the same time, you can use `useProgress` in place of `useSaveProgress` to use the local storage, or the session storage.
+> The underlying logic is the same, but the name is different. The `useProgress` hook takes the same arguments as the
+> `useSaveProgress` hook.
+> 
+> Example:
+> ```typescript jsx
+> const [values, updateValues, deleteValues] = useSaveProgress({key: 'user-form', storage: sessionStorage});
+> // or
+> // const [values, updateValues, deleteValues] = useProgress({key: 'user-form', storage: sessionStorage});
+> ```
+
 ```typescript jsx
 import {useSaveProgress} from "@crispice/save-progress";
 

package.json

@@ -1,10 +1,9 @@
 {
   "name": "@crispice/save-progress",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "A React hook to save progress in a form, or any other scenario, and restore it when the user returns to the form. It uses localStorage to save the progress.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "type": "module",
   "files": [
     "dist"
   ],
@@ -23,8 +22,6 @@
     "use-save-progress",
     "react",
     "typescript",
-    "rollup",
-    "template",
     "component",
     "package"
   ],

src/hooks/index.ts

@@ -1,2 +1,3 @@
 // export hooks
-export {default as useSaveProgress} from './saveProgress/useSaveProgress';
+export {default as useSaveProgress} from './saveProgress/useSaveProgress';
+export {default as useProgress} from './saveProgress/useSaveProgress';

src/hooks/saveProgress/useSaveProgress.ts

@@ -21,21 +21,29 @@ import React from 'react';
  * @returns [values, updateValues, clearValues] The data, a function to update the data, and a function to clear the data
  */
 const useSaveProgress = ({key, initialValues, storage}: { key: string, initialValues?: any, storage?: Storage }) => {
-    const [values, setValues] = React.useState(() => {
-        const saved = (storage ?? localStorage).getItem(key);
-        const initialValue = JSON.parse(saved!);
-        return initialValue || initialValues || {};
-    });
+    const [values, setValues] = React.useState(initialValues || {});
+
+    React.useEffect(() => {
+        if (typeof window !== 'undefined') {
+            const saved = (storage ?? window.localStorage).getItem(key);
+            const initialValue = JSON.parse(saved!);
+            setValues(initialValue || initialValues || {});
+        }
+    }, []);
 
     // Helper function to save the data to local storage
     const saveValues = (value: any) => {
-        (storage ?? localStorage).setItem(key, JSON.stringify(value));
+        if (typeof window !== 'undefined') {
+            (storage ?? window.localStorage).setItem(key, JSON.stringify(value));
+        }
     };
 
     // Provide helper function to clear the data from local storage
     const clearValues = () => {
         setValues(initialValues || {});
-        (storage ?? localStorage).removeItem(key);
+        if (typeof window !== 'undefined') {
+            (storage ?? window.localStorage).removeItem(key);
+        }
     };
 
     // Provide helper function to update the data in local storage