Getting Started

Install

npm install --save carry-on-store carry-on-react

Simple store

Live Editor

import { State } from "carry-on-react"; import { register } from "carry-on-store"; const storeId = "getStarted"; register(storeId, { state: ({ set }) => ({ counter: 0, inc: () => set(state => { state.counter += 1; }), dec: () => set(state => { state.counter -= 1; }) }) }); render( <State from={storeId}> {({ counter, inc, dec }) => ( <> <div>Counter: {counter}</div> <button onClick={inc}>+</button> <button onClick={dec}>-</button> <StateInspector from={storeId} /> </> )} </State> );

import { State } from "carry-on-react";
import { register } from "carry-on-store";

const storeId = "getStarted";

register(storeId, {
  state: ({ set }) => ({
    counter: 0,
    inc: () =>
      set(state => {
        state.counter += 1;
      }),
    dec: () =>
      set(state => {
        state.counter -= 1;
      })
  })
});

render(
  <State from={storeId}>
    {({ counter, inc, dec }) => (
      <>
        <div>Counter: {counter}</div>
        <button onClick={inc}>+</button>
        <button onClick={dec}>-</button>
        <StateInspector from={storeId} />
      </>
    )}
  </State>
);

Result

Loading...

Composing

Live Editor

import { Store, State, Register, Render } from "carry-on-react"; render( <Store id={"getStartedComposing"}> <State> <Register> {({ set }) => ({ counter: 0, inc: () => set(state => { state.counter += 1; }), dec: () => set(state => { state.counter -= 1; }) })} </Register> <Render> {({ counter, inc, dec }) => ( <> <div>Counter: {counter}</div> <button onClick={inc}>+</button> <button onClick={dec}>-</button> <StateInspector /> </> )} </Render> </State> </Store> );

import { Store, State, Register, Render } from "carry-on-react";

render(
  <Store id={"getStartedComposing"}>
    <State>
      <Register>
        {({ set }) => ({
          counter: 0,
          inc: () =>
            set(state => {
              state.counter += 1;
            }),
          dec: () =>
            set(state => {
              state.counter -= 1;
            })
        })}
      </Register>
      <Render>
        {({ counter, inc, dec }) => (
          <>
            <div>Counter: {counter}</div>
            <button onClick={inc}>+</button>
            <button onClick={dec}>-</button>
            <StateInspector />
          </>
        )}
      </Render>
    </State>
  </Store>
);

Result

Loading...