react-hooks-global-state
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0-rc.0 • Public • Published

    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.

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

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

    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.

    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

    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<State, Action>

    useGlobalState

    useGlobalState created by createStore is deprecated.

    Type: function (stateKey: StateKey): any

    Meta

    • deprecated: useStoreState instead

    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 13

    Blogs

    Community Wiki

    Install

    npm i react-hooks-global-state

    DownloadsWeekly Downloads

    11,204

    Version

    2.0.0-rc.0

    License

    MIT

    Unpacked Size

    53.1 kB

    Total Files

    16

    Last publish

    Collaborators

    • daishi