react-hooks-global-state-next
Version:
Simple global state for React with Hooks API without Context API
222 lines (156 loc) ā¢ 6.46 kB
Markdown
# 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.**
[](https://www.npmjs.com/package/react-hooks-global-state-next)
[](https://www.npmjs.com/package/react-hooks-global-state-next)
[](https://bundlephobia.com/result?p=react-hooks-global-state-next)
[](https://github.com/thanhcuong1990/react-hooks-global-state-next/blob/main/LICENSE)
[](https://www.typescriptlang.org/)
[](https://github.com/thanhcuong1990/react-hooks-global-state-next/issues)
[](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.