react-hooks-global-state-next

Note: This is a community-maintained fork of the original react-hooks-global-state package, which is no longer maintained. This version includes updated dependencies and continued support.

📦 View on npm

Simple global state for React with Hooks API without Context API

Introduction

This is a library to provide a global state with React Hooks. It has following characteristics.

• Optimization for shallow state getter and setter.
  • The library cares the state object only one-level deep.
• TypeScript type definitions
  • A creator function creates hooks with types inferred.
• Redux middleware support to some extent
  • Some of libraries in Redux ecosystem can be used.

Install

npm install react-hooks-global-state-next

Usage

setState style

import React from 'react';
import { createGlobalState } from 'react-hooks-global-state-next';

const initialState = { count: 0 };
const { useGlobalState } = createGlobalState(initialState);

const Counter = () => {
  const [count, setCount] = useGlobalState('count');
  return (
    <div>
      <span>Counter: {count}</span>
      {/* update state by passing callback function */}
      <button onClick={() => setCount(v => v + 1)}>+1</button>
      {/* update state by passing new value */}
      <button onClick={() => setCount(count - 1)}>-1</button>
    </div>
  );
};

const App = () => (
  <>
    <Counter />
    <Counter />
  </>
);

reducer style

import React from 'react';
import { createStore } from 'react-hooks-global-state-next';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment': return { ...state, count: state.count + 1 };
    case 'decrement': return { ...state, count: state.count - 1 };
    default: return state;
  }
};
const initialState = { count: 0 };
const { dispatch, useStoreState } = createStore(reducer, initialState);

const Counter = () => {
  const value = useStoreState('count');
  return (
    <div>
      <span>Counter: {value}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
    </div>
  );
};

const App = () => (
  <>
    <Counter />
    <Counter />
  </>
);

API

createGlobalState

Create a global state.

It returns a set of functions

• useGlobalState: a custom hook works like React.useState
• getGlobalState: a function to get a global state by key outside React
• setGlobalState: a function to set a global state by key outside React
• subscribe: a function that subscribes to state changes

Parameters

• initialState State

Examples

import { createGlobalState } from 'react-hooks-global-state-next';

const { useGlobalState } = createGlobalState({ count: 0 });

const Component = () => {
  const [count, setCount] = useGlobalState('count');
  ...
};

createStore

Create a global store.

It returns a set of functions

• useStoreState: a custom hook to read store state by key
• getState: a function to get store state by key outside React
• dispatch: a function to dispatch an action to store

A store works somewhat similarly to Redux, but not the same.

Parameters

• reducer Reducer<State, Action>
• initialState State (optional, default (reducer as any)(undefined,{type:undefined}))
• enhancer any?

Examples

import { createStore } from 'react-hooks-global-state-next';

const initialState = { count: 0 };
const reducer = ...;

const store = createStore(reducer, initialState);
const { useStoreState, dispatch } = store;

const Component = () => {
  const count = useStoreState('count');
  ...
};

Returns Store<State, Action>

useGlobalState

useGlobalState created by createStore is deprecated.

Type: function (stateKey: StateKey): any

Meta

• deprecated: useStoreState instead

Examples

The examples folder contains working examples. You can run one of them with

PORT=8080 npm run examples:01_minimal

and open http://localhost:8080 in your web browser.

Migration from react-hooks-global-state

If you're migrating from the original react-hooks-global-state package, simply update your package.json and import statements:

npm uninstall react-hooks-global-state
npm install react-hooks-global-state-next

Then update your imports:

// Before
import { createGlobalState } from 'react-hooks-global-state';

// After  
import { createGlobalState } from 'react-hooks-global-state-next';

Changes from Original

• ✅ Updated to Zustand v5.0.5 (from v4.0.0)
• ✅ Maintained full backward compatibility
• ✅ Continued maintenance and support

Original Project

This project is based on react-hooks-global-state by Daishi Kato. The original project is no longer maintained, but you can still find the original documentation and examples there.

For more advanced use cases, consider using Zustand directly.