# 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.**

[![npm version](https://img.shields.io/npm/v/react-hooks-global-state-next.svg)](https://www.npmjs.com/package/react-hooks-global-state-next)
[![npm downloads](https://img.shields.io/npm/dm/react-hooks-global-state-next.svg)](https://www.npmjs.com/package/react-hooks-global-state-next)
[![bundle size](https://img.shields.io/bundlephobia/minzip/react-hooks-global-state-next.svg)](https://bundlephobia.com/result?p=react-hooks-global-state-next)
[![license](https://img.shields.io/npm/l/react-hooks-global-state-next.svg)](https://github.com/thanhcuong1990/react-hooks-global-state-next/blob/main/LICENSE)
[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
[![GitHub issues](https://img.shields.io/github/issues/thanhcuong1990/react-hooks-global-state-next.svg)](https://github.com/thanhcuong1990/react-hooks-global-state-next/issues)
[![GitHub stars](https://img.shields.io/github/stars/thanhcuong1990/react-hooks-global-state-next.svg)](https://github.com/thanhcuong1990/react-hooks-global-state-next/stargazers)

📦 **[View on npm](https://www.npmjs.com/package/react-hooks-global-state-next)**

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

```bash
npm install react-hooks-global-state-next
```

## Usage

### setState style

```javascript
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

```javascript
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

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### 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

```javascript
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

```javascript
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](examples) folder contains working examples.
You can run one of them with

```bash
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:

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

Then update your imports:

```javascript
// 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](https://github.com/dai-shi/react-hooks-global-state) by [Daishi Kato](https://github.com/dai-shi). 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](https://github.com/pmndrs/zustand) directly.