use-global-state

is a react-hook for using one or multiple global states in react components.

const SomeComponent = () => {

    const [name, setName] = useGlobalState('name'); 

}

useGlobalState takes one argument which is a key. Every hook call with the same key shares the same data.

When, like in this example, using the "default global state", all properties are by default of type any.

If you want to use typed, shared data, or want to use an initial state, you need to create your own custom global state.

Custom global state

You can create your own custom global state and use it with hooks in three steps:

// 1. create an object which is your initial state
const appState = {
    name: 'Steven',
    age: 22,
}

// 2. create a global state with your object
const globalAppState = createGlobalState(appState);

// 3. create a hook which uses your global state
export const useAppState = createGlobalStateHook(globalAppState);


// use it

const SomeComponent = () => {

    const [name, setName] = useAppState('name');
    const [age, setAge] = useAppState('age');
    
}

That way name and age are typed and have the initial value you specified.