react-create-global-state

Generate a useState, but for global variables.

Usage

1 - Create your custom hook

/**
 * useGlobalCounter.js
*/
import createGlobalState from 'react-create-global-state'
// create the global for your hook
const initialState = 0
const [useGlobalCounter, Provider] = createGlobalState(initialState)
// export the provider to link in the application
export const GlobalCounterProvider = Provider
// export the hook
export default useGlobalCounter

2 - Link the provider in your application

import React, { Component } from 'react';
// import the provider from your global var
import { GlobalCounterProvider } from './useGlobalCounter'
class App extends Component {
  render() {
    return (
      // add the provider.
      <GlobalCounterProvider>
        <div>
          {/*...*/}
        </div>
      </GlobalCounterProvider>
    );
  }
}
export default App

3 - Use the hook

/**
 * Counter.js
*/
import React from 'react'
import useGlobalCounter from './useGlobalCounter'
export default function Counter(props) {
  const [state, setState] = useGlobalCounter()
  return (
    <div>
      <p>State: {state}</p>
      <button onClick={() => setState(state + 1)}>+1</button>
      <button onClick={() => setState(state - 1)}>-1</button>
    </div>
  )
}

/**
 * App.js
*/
import React, { Component } from 'react';
import { GlobalCounterProvider } from './useGlobalCounter'
import Counter from './Counter'
class App extends Component {
  render() {
    return (
      <GlobalCounterProvider>
        <div style={{ margin: '20px' }}>
          <Counter ></Counter>
          <Counter ></Counter>
        </div>
      </GlobalCounterProvider>
    );
  }
}
export default App

Result:

Sample

You can check the sample code HERE