Neurotic Pink Mongooses

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

    2.1.5 • Public • Published

    react-context-global-state

    Build Status npm version bundle size

    Simple global state for React with Context API

    Background

    React v16.3 introduces a new Context API. Context API allows to pass values down to a component tree without explicit props.

    In favor of writing all components stateless in "thisless" JavaScript, this package is developed. This package provides a simple way to define a global state with Context API.

    Install

    npm install react-context-global-state

    Usage

    import React from 'react';
    import { createGlobalState } from 'react-context-global-state';
     
    const initialState = { counter: 0 };
    const { StateProvider, StateConsumer } = createGlobalState(initialState);
     
    const Counter = () => (
      <StateConsumer name="counter">
        {(value, update) => (
          <div>
            <span>Counter: {value}</span>
            <button onClick={() => update(v => v + 1)}>Click</button>
          </div>
        )}
      </StateConsumer>
    );
     
    const App = () => (
      <StateProvider>
        <Counter />
      </StateProvider>
    );

    Example

    The examples folder contains working examples. You can run one of them with

    PORT=8080 npm run examples:minimal

    and open http://localhost:8080 in your web browser.

    You can also try them in codesandbox.io: 01 02 03 04 05

    Reference

    Syntax

    createGlobalState(initialState)
    

    Parameters

    initialState: an object like { name1: value1, name2: value2, ... }

    Return value

    An object of { StateProvider, StateConsumer, setGlobalState }

    StateProvider: a component to provide entire state

    StateConsumer: a component that receives a required name prop and invokes a child function prop whose signature is (value, update) => {} where value is the state value specified by the name and update is a function to update the value

    The update function above is similar to Component.prototype.setState, and accepts either an updating function or a new value itself.

    setGlobalState: a function to update a value in global state from outside of components. It recevies a name and a update value (or function).

    getGlobalState: a function to get a value in global state from outside of components. It recevies a name.

    Blogs

    Install

    npm i react-context-global-state

    DownloadsWeekly Downloads

    38

    Version

    2.1.5

    License

    MIT

    Unpacked Size

    16.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • daishi