react-hooks-global-state

by dai-shi

Simple global state for React with Hooks API without Context API

522 Stars 32 Forks Last release: Not found MIT License 231 Commits 4 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

react-hooks-global-state

CI npm size

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 gloal 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.