react-changes

React-Earth Library Documentation

React-Earth is a lightweight, easy-to-use library that provides global state management for React applications. With React-Earth, you can easily manage application state and undo/redo state changes, making it simple to implement features like undo buttons, multi-step forms, and more.

Installation

To install React-Earth, simply run:

Copy code npm install react-earth Usage To use React-Earth in your React application, you need to wrap your application in the GlobalStateProvider component, like this:

jsx Copy code import React from 'react'; import { GlobalStateProvider } from 'react-earth';

function App() { return ( {/* Your app code goes here */} ); } Once you've wrapped your app in GlobalStateProvider, you can use the useGlobalState hook to access the global state from any component, like this:

jsx Copy code import React from 'react'; import { useGlobalState } from 'react-earth';

function MyComponent() { const { globalState, setState } = useGlobalState();

const handleClick = () => { setState('counter', globalState.counter + 1); };

return (

Counter: {globalState.counter}

Increment

); }

API

GlobalStateProvider

The GlobalStateProvider component wraps your application and provides the global state and state management methods to all child components. It takes no props other than children.

useGlobalState

The useGlobalState hook is used to access the global state and state management methods from any component. It returns an object with the following properties:

globalState: The current global state object.

updateGlobalState(updatedState, isUserChange): A function that updates the global state with the provided updatedState object. If isUserChange is true (the default), the state change will be added to the state history, allowing it to be undone or redone later. getState(path): A function that retrieves a value from the global state object at the specified path. The path should be a dot-separated string, e.g. "user.name". setState(path, value): A function that sets a value in the global state object at the specified path. The path should be a dot-separated string, e.g. "user.name". undoState(): A function that undoes the last state change. redoState(): A function that redoes the last undone state change. clearHistory(): A function that clears the history of state changes. getVersions(): A function that returns an array of all state versions in the history. playHistory(ms): A function that plays back the history of state changes in sequence, with a delay of ms milliseconds between each change. loadVersion(id): A function that loads a specific state version from the history by its _id property. Notes setState, undoState, redoState, clearHistory, getVersions, playHistory, and loadVersion are all aliases of the longer-named methods set, undo, redo, clear, versions, play, and load, respectively. You can use whichever name you prefer. React-Earth stores the state history in memory, so it is not persistent across page reloads or server restarts. If you need to persist state history, you'll need