Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-changes

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-changes

  • 0.0.7
  • npm
  • Socket score

Version published
Weekly downloads
21
decreased by-47.5%
Maintainers
1
Weekly downloads
 
Created
Source

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

FAQs

Package last updated on 29 May 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc