Lightweight global state management for React + Typescript.

Setup

1. npm i lightweight-globalstate

2. import StateProvider from 'lightweight-globalstate';

3. Wrap it around your application and optionally pass in a Type for your App state.

4. Optionally pass in an initial state

import React from 'react';
import { StateProvider } from 'lightweight-globalstate'; // 1. Import
const initialState = {
  ...whatever
}
const App: React.FC = () => {
  return (
     <StateProvider<T> initialState={initialState}> // 2. Wrap it up
        {... your app}
    </StateProvider>
  );
};

export default App;

Access

The useGlobalState hook returns an array containing: your state object and an update function. eg.

import { useGlobalState } from 'lightweight-globalstate';
  const [state,updateState] = useGlobalState<T>(); 

Update

1. Call the updateState method
2. Pass in an object containing the state you want to update

updateState({stateObject: newValue})

NOTE:

this works differently to React.useState(). updateState will not replace the state object. I will spread it into the existing state.

newState = {...state, ...newValue};