react-usectx 1.2.3 → 1.2.5

package/README.md

@@ -19,8 +19,17 @@ import {useGlobalState} from "react-usectx";
 ```js
 // get both current state and set function
 const [myState, setMyState] = useGlobalState("stateName");
+
+
+// use with undo and redo methods
+const [myState, setMyState, undo, redo] = useGlobalState("stateName");
+
 ```
 
+Undo and redo functionality is essential for any interface that allows users to make edits. It enhances usability by giving users confidence that their changes aren’t permanent and can be easily adjusted.
+
+By implementing simple Undo and Redo actions—typically as two buttons—you allow users to navigate backward to a previous state or forward to a more recent state of the component.
+
 ## Other methods:
 
 ### getGlobalState
@@ -80,7 +89,7 @@ useGlobalState(myContextID, { name: "John" });
 The value you want the state to be initially. It can be a value of any type.
 
 
-### API Methods
+## API Methods
 
 ```js
 const api = stateApi(myContextID);

package/context.js

@@ -22,7 +22,8 @@ export function getCtx(name) {
 }
 export function useCtx(name, initialState) {
     const initializeFirst = updateCtx(name, initialState);
-    return [getCtx(name), initializeFirst];
+    const api = getInstance(name);
+    return [getCtx(name), initializeFirst, api.undo.bind(api), api.redo.bind(api), api];
 }
 const reducerCache = {};
 export function useReducer(name, modiFier, useCache = false) {

package/create-context.js

@@ -33,26 +33,35 @@ export class CreateContext {
     undo() {
         const prev = this.#history[this.#activeVersion - 1];
         if (prev) {
-            this.setState(prev, this.#history.indexOf(prev));
+            this.setState(prev, this.#history.indexOf(prev), true);
             this.#needsReset = true;
             this.#trigger();
         }
     }
+    hasUndo() {
+        return this.#activeVersion > 0;
+    }
     redo() {
-        const next = this.#history[this.#activeVersion + 1];
+        const nextIndex = this.#activeVersion + 1;
+        const next = this.#history[nextIndex];
         if (next) {
-            this.setState(next, this.#history.indexOf(next));
+            this.setState(next, nextIndex, true);
             this.#needsReset = true;
             this.#trigger();
         }
     }
-    setState(state, _av) {
+    hasRedo() {
+        return !!this.#history[this.#activeVersion + 1];
+    }
+    setState(state, _av, _skipPush) {
         if (typeof _av === 'undefined') {
-            if ((this.#history.length - 1) > this.#activeVersion && this.#needsReset) {
+            if (this.#history.length > 0 && (this.#history.length - 1) > this.#activeVersion && this.#needsReset) {
                 this.#history.splice(this.#activeVersion + 1, this.#history.length);
             }
         }
-        this.#history.push(state);
+        if (!_skipPush) {
+            this.#history.push(state);
+        }
         if (this.#history.length > this.settings.historySize) {
             this.#history.shift();
         }

package/index.js

@@ -1,2 +1,2 @@
 export { useCtx as default, useCtx as useGlobalState } from "./context";
-export { getCtx, useReducer, updateCtx, getCtx as getGlobalState, useReducer as useGlobalReducer, updateCtx as updateGlobalState } from "./context";
+export { getCtx, useReducer, updateCtx, getCtx as getGlobalState, useReducer as useGlobalReducer, updateCtx as updateGlobalState, stateApi } from "./context";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-usectx",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "main": "index.js",
   "type": "module",
   "repository": {

package/src/context.ts

@@ -39,9 +39,10 @@ export function getCtx<Snapshot>(name: string): Snapshot {
 export function useCtx(
   name: string,
   initialState?: state
-): [ReactNode, Function] {
-  const initializeFirst = updateCtx(name, initialState)
-  return [getCtx(name), initializeFirst];
+): [ReactNode, Function, Function, Function, CreateContext] {
+  const initializeFirst = updateCtx(name, initialState);
+  const api = getInstance(name);
+  return [getCtx(name), initializeFirst, api.undo.bind(api), api.redo.bind(api), api];
 }
 
 const reducerCache: { [key: string]: WeakMap<any, any> } = {};

package/src/create-context.ts

@@ -49,28 +49,40 @@ export class CreateContext {
   undo() {
       const prev = this.#history[this.#activeVersion - 1];
       if (prev) {
-          this.setState(prev, this.#history.indexOf(prev));
+          this.setState(prev, this.#history.indexOf(prev), true);
           this.#needsReset = true;
           this.#trigger()
       }
       
   }
+
+  hasUndo() {
+    return this.#activeVersion > 0;
+  }
+
   redo() {
-      const next = this.#history[this.#activeVersion + 1];
+      const nextIndex = this.#activeVersion + 1;
+      const next = this.#history[nextIndex];
       if (next) {
-          this.setState(next, this.#history.indexOf(next));
+          this.setState(next, nextIndex, true);
           this.#needsReset = true;
           this.#trigger()
       } 
   }
 
-  setState(state: state, _av?: number): void {
+  hasRedo() {
+    return !!this.#history[this.#activeVersion + 1]
+  }
+
+  setState(state: state, _av?: number, _skipPush?: boolean): void {
     if (typeof _av === 'undefined') {
-        if((this.#history.length - 1) > this.#activeVersion && this.#needsReset) {
+        if(this.#history.length > 0 && (this.#history.length - 1) > this.#activeVersion && this.#needsReset) {
             this.#history.splice(this.#activeVersion + 1, this.#history.length)
         }
     }
-    this.#history.push(state);
+    if(!_skipPush) {
+        this.#history.push(state); 
+    }
     if (this.#history.length > this.settings.historySize!) {
         this.#history.shift();
     }

package/src/index.ts

@@ -1,2 +1,2 @@
 export { useCtx as default, useCtx as useGlobalState } from "./context";
-export { getCtx, useReducer, updateCtx, getCtx as getGlobalState, useReducer as useGlobalReducer, updateCtx as updateGlobalState } from "./context";
+export { getCtx, useReducer, updateCtx, getCtx as getGlobalState, useReducer as useGlobalReducer, updateCtx as updateGlobalState, stateApi } from "./context";