@iosio/capsule

Simple global state, routing and convenience tool for React.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
20Jun 16, 2019Jun 28, 2018Minified + gzip package size for @iosio/capsule in KB

Readme


@iosio/capsule

Simple global state and convenience tool for React.

Key Features

  • Shared centralized state and logic.
  • ~3KB minified + gzipped.
  • No dispatching and no reducers!
  • As a bonus, capsule includes a simple, ultra light, 1-2 level nested Router component, Link component and a slim routing API. See the routing docs for more info.

Installation

npm install @iosio/capsule --save

Basic Usage

For more info, check out the docs or view the demo code
Start by including the CapsuleProvider at the root of your app
//index.js
import React from 'react';
import {CapsuleProvider} from '@iosio/capsule';
import {render} from 'react-dom'
import {App} from './App';

 const Root = () => (
    <CapsuleProvider>
        <App/>
    </CapsuleProvider>
);

render(<Root/>, document.querySelector('#root'));
Use Capsule to create portable logic and state
//logic.js
import {Capsule} from '@iosio/capsule';
import {client} from './client';

export const myTodoLogic = Capsule({
    name: 'myTodos',
    initialState: {
        fetching: false,
        list: [],
    },
    logic: ({set, merge}) => ({
        getSetTodos: async () => {
            set.fetching(true);
            const list = await client.getTodos();
            merge({fetching: false, list});
        }
    })
})();//<-optionally call curried function to store logic to variable
And use Capsule to connect state and logic to your components.
//App.js
import React from 'react';
//make sure your isolated logic capsules 
//are in scope somewhere near the root of your app
import './logic'; // <- as in here, a dedicated capsule index, or the app index.js file
import {Capsule} from '@iosio/capsule'
import {LoadingIndicator} from './components/LoadingIndicator';

// make selections by using comma separated values or functions
export const App = Capsule({
    mapState: {myTodos: 'fetching,list'}, 
    mapLogic: ({myTodos}) => ({ getSetTodos: myTodos.getSetTodos })
})(({list, fetching, getSetTodos}) => (
    <div>
        <Button onClick={getSetTodos} text={'GET MY TODOS!'}/>
            {fetching ?
                <LoadingIndicator/> :
                <ul>
                    {list.map((item) => (
                        <li key={item.id}>{item.name}</li>
                    ))}
                </ul>
            }
    </div>
));
Capsule if flexible
//demonstrating returned actions if logic property is omitted
const myTodoActions = Capsule({
    name: 'myTodos',
    initialState: {
        fetching: false,
        list: [],
    }
})();

const getSetTodos = async () => {
  const {set, merge} = myTodoActions;
  set.fetching(true);
  const list = await client.getTodos();
  merge({fetching: false, list});
}
Alternative arguments

See Alternative Arguments for more info.

export const myTodoLogic = Capsule('myTodos',
    {fetching: false, list: []},
    ({set, merge}) => ({
        getSetTodos: async () => {
            set.fetching(true);
            const list = await client.getTodos();
            merge({fetching: false, list});
        }
    })
)();

License

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.