bhrott / react-create-global-state

Generate a useState, but for global variables.

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 />
        </div>
      </GlobalCounterProvider>
    );
  }
}

export default App

Result:

Sample

You can check the sample code HERE