DEV Community

Discussion on: Global State Management with React usestate, useContext Hooks and Context API.

Collapse
 
devhammed profile image
Hammed Oyedele

I have created a library using this concept a while ago useGlobalHooks.

GitHub logo devhammed / use-global-hook

Painless global state management for React using Hooks and Context API in 1KB!

use-global-hook

Painless global state management for React using Hooks and Context API in 1KB!

NPM JavaScript Style Guide

Installation

npm install @devhammed/use-global-hook

Quick Example

import React from 'react'
import ReactDOM from 'react-dom'
import { GlobalHooksProvider, createGlobalHook, useGlobalHook } from '@devhammed/use-global-hook'
const store = createGlobalHook(/** 1 **/ 'counterStore', () => {
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(count + 1)
  const decrement = () => setCount(count - 1)
  const reset = () => setCount(0)
  return { count, increment, decrement, reset }
})
function Counter () {
  const { count, increment, decrement, reset } = useGlobalHook('counterStore') /** 1. This is where you use the name you defined in `createGlobalHook` function,