Need help with react-hooks-global-state?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

dai-shi
761 Stars 44 Forks MIT License 261 Commits 8 Opened issues

Description

Simple global state for React with Hooks API without Context API

Services available

!
?

Need anything else?

Contributors list

# 20,640
Redux
React
reactjs
TypeScr...
213 commits
# 311,751
React
localst...
hooks-a...
Shell
3 commits
# 431,336
JavaScr...
Koa
TypeScr...
React
2 commits

react-hooks-global-state

CI npm size discord

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.
    • Redux DevTools Extension could be used in a simple scenario.
  • Concurrent Mode support (Experimental)
    • Undocumented
      useGlobalStateProvider
      supports CM without React Context.

Install

npm install react-hooks-global-state

Usage

setState style

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 /} setCount(v => v + 1)}>+1 {/ update state by passing new value */} setCount(count - 1)}>-1
); };

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

reducer style

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, useGlobalState } = createStore(reducer, initialState);

const Counter = () => { const [value] = useGlobalState('count'); return (

Counter: {value} dispatch({ type: 'increment' })}>+1 dispatch({ type: 'decrement' })}>-1
); };

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

Parameters

  • initialState
    State

Examples

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

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

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

createStore

create a global store

In additon to

useGlobalState
which is the same hook as in createGlobalState, a store has
getState
and
dispatch
. 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
    Enhancer<any>?

Examples

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

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

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

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

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.

You can also try them in codesandbox.io: 01 02 03 04 05 06 07 08 09 10 11 12 13

Blogs

Community Wiki

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.