# react-hooks-global-state [![CI](https://img.shields.io/github/workflow/status/dai-shi/react-hooks-global-state/CI)](https://github.com/dai-shi/react-hooks-global-state/actions?query=workflow%3ACI) [![npm](https://img.shields.io/npm/v/react-hooks-global-state)](https://www.npmjs.com/package/react-hooks-global-state) [![size](https://img.shields.io/bundlephobia/minzip/react-hooks-global-state)](https://bundlephobia.com/result?p=react-hooks-global-state) [![discord](https://img.shields.io/discord/627656437971288081)](https://discord.gg/MrQdmzd) 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 ``` ## Usage ### setState style ```javascript import React from 'react'; import { createGlobalState } from 'react-hooks-global-state'; const initialState = { count: 0 }; const { useGlobalState } = createGlobalState(initialState); const Counter = () => { const [count, setCount] = useGlobalState('count'); return (

Counter: {count} {/* update state by passing callback function */} {/* update state by passing new value */}

); }; const App = () => ( <> ); ``` ### reducer style ```javascript import React from 'react'; import { createStore } from 'react-hooks-global-state'; 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 (

Counter: {value}

); }; const App = () => ( <> ); ``` ## 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 ```javascript import { createGlobalState } from 'react-hooks-global-state'; 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\** * `initialState` **State** (optional, default `(reducer as any)(undefined,{type:undefined})`) * `enhancer` **any?** #### Examples ```javascript import { createStore } from 'react-hooks-global-state'; const initialState = { count: 0 }; const reducer = ...; const store = createStore(reducer, initialState); const { useStoreState, dispatch } = store; const Component = () => { const count = useStoreState('count'); ... }; ``` Returns **Store\** ### 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 in your web browser. You can also try them in codesandbox.io: [01](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/01\_minimal) [02](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/02\_typescript) [03](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/03\_actions) [04](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/04\_fetch) [05](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/05\_onmount) [06](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/06\_reducer) [07](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/07\_middleware) [08](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/08\_thunk) [09](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/09\_comparison) [10](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/10\_immer) [11](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/11\_deep) [13](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/13\_persistence) ## Blogs * [TypeScript-aware React hooks for global state](https://blog.axlight.com/posts/typescript-aware-react-hooks-for-global-state/) * [An alternative to React Redux by React Hooks API (For both JavaScript and TypeScript)](https://blog.axlight.com/posts/an-alternative-to-react-redux-by-react-hooks-api-for-both-javascript-and-typescript/) * [Redux middleware compatible React Hooks library for easy global state management](https://blog.axlight.com/posts/redux-middleware-compatible-react-hooks-library-for-easy-global-state-management/) * [React Hooks Tutorial on pure useReducer + useContext for global state like Redux and comparison with react-hooks-global-state](https://blog.axlight.com/posts/react-hooks-tutorial-for-pure-usereducer-usecontext-for-global-state-like-redux-and-comparison/) * [Four patterns for global state with React hooks: Context or Redux](https://blog.axlight.com/posts/four-patterns-for-global-state-with-react-hooks-context-or-redux/) * [Steps to Develop Global State for React With Hooks Without Context](https://blog.axlight.com/posts/steps-to-develop-global-state-for-react/) ## Community Wiki * [Persistence](https://github.com/dai-shi/react-hooks-global-state/wiki/Persistence) * [Optional initialState](https://github.com/dai-shi/react-hooks-global-state/wiki/Optional-initialState)

	Stars	Issues	Version	Updated	Created
react-hooks-global-state	1,099	6	2.1.0	a year ago	6 years ago
react-tracked	2,641	0	1.7.14	2 months ago	5 years ago
recoil	19,448	320	0.7.7	a year ago	4 years ago
redux-toolbox			2.0.0	6 years ago	7 years ago
zustand	42,749	7	4.5.2	2 months ago	5 years ago

react-hooks-global-state vs react-tracked vs recoil vs redux-toolbox vs zustand

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past