react-create-global-state

Generate a useState, but for global variables.

---

---

Usage

1 - Create your custom hook

// use-global-counter.tsx

import createGlobalState from 'react-create-global-state'

const [useGlobalCounter, GlobalCounterProvider] = createGlobalState<number>(0)

export GlobalCounterProvider
export default useGlobalCounter

2 - Link the provider in your application

// app.tsx

import React, { Component } from 'react';
import { GlobalCounterProvider } from './use-global-counter'

const App = () => (
  <GlobalCounterProvider>
    <div>
      {/*...*/}
    </div>
  </GlobalCounterProvider>
)

export default App

3 - Use the hook

// counter.tsx

import React from 'react'
import useGlobalCounter from './use-global-counter'

const Counter = () => {
  const [counter, setCounter] = useGlobalCounter()

  return (
    <div>
      <p>State: {counter}</p>
      <button onClick={() => setCounter(counter + 1)}>+1</button>
      <button onClick={() => setCounter(counter - 1)}>-1</button>
    </div>
  )
}

export default Counter

// app.tsx

import React, { Component } from 'react';
import { GlobalCounterProvider } from './useGlobalCounter'
import Counter from './Counter'

const App = () => (
  <GlobalCounterProvider>
    <div style={{ margin: '20px' }}>
      <Counter />
      <Counter />
    </div>
  </GlobalCounterProvider>
)

export default App

Result:

Sample

You can check the sample code HERE