Examples

Default store

Live Editor

register({ state: ({ set }) => ({ counter: 0, inc: () => set(state => void state.counter++), dec: () => set(state => void state.counter--) }) }); render( <> <State> {state => ( <> <div>Counter: {state.counter}</div> <button onClick={state.inc}>+</button> <button onClick={state.dec}>-</button> </> )} </State> <StateInspector /> </> );

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

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

Result

Loading...

Two named stores

Live Editor

const state = { state: ({ set }) => ({ counter: 0, inc: () => set(state => void state.counter++), dec: () => set(state => void state.counter--) }) }; register("store1", state); register("store2", state); render( <> <State from="store1"> {state => ( <div> <h4>Store 1</h4> <div>Counter: {state.counter}</div> <button onClick={state.inc}>+</button> <button onClick={state.dec}>-</button> </div> )} </State> <StateInspector from="store1" /> <State from="store2"> {({ counter, inc, dec }) => ( <div> <h4>Store 2</h4> <div>Counter: {counter}</div> <button onClick={inc}>+</button> <button onClick={dec}>-</button> </div> )} </State> <StateInspector from="store2" /> </> );

const state = {
  state: ({ set }) => ({
    counter: 0,
    inc: () => set(state => void state.counter++),
    dec: () => set(state => void state.counter--)
  })
};

register("store1", state);
register("store2", state);

render(
  <>
    <State from="store1">
      {state => (
        <div>
          <h4>Store 1</h4>
          <div>Counter: {state.counter}</div>
          <button onClick={state.inc}>+</button>
          <button onClick={state.dec}>-</button>
        </div>
      )}
    </State>
    <StateInspector from="store1" />

    <State from="store2">
      {({ counter, inc, dec }) => (
        <div>
          <h4>Store 2</h4>
          <div>Counter: {counter}</div>
          <button onClick={inc}>+</button>
          <button onClick={dec}>-</button>
        </div>
      )}
    </State>
    <StateInspector from="store2" />
  </>
);

Result

Loading...

State select

Live Editor

const storeId = "stateSelect"; register(storeId, { state: ({ set }) => ({ notSelected: "item", counter: 0, inc: () => set(state => void state.counter++), dec: () => set(state => void state.counter--) }) }); const select = ({ counter, inc, dec }) => ({ counter, inc, dec }); render( <> <State from={storeId} select={select}> {({ counter, inc, dec, notSelected }) => ( <div> <div> notSelected is undefined? {notSelected === undefined ? "yes" : "no"} </div> <div>Counter: {counter}</div> <button onClick={inc}>+</button> <button onClick={dec}>-</button> </div> )} </State> <StateInspector from={storeId} /> </> );

const storeId = "stateSelect";

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

const select = ({ counter, inc, dec }) => ({ counter, inc, dec });

render(
  <>
    <State from={storeId} select={select}>
      {({ counter, inc, dec, notSelected }) => (
        <div>
          <div>
            notSelected is undefined? {notSelected === undefined ? "yes" : "no"}
          </div>
          <div>Counter: {counter}</div>
          <button onClick={inc}>+</button>
          <button onClick={dec}>-</button>
        </div>
      )}
    </State>
    <StateInspector from={storeId} />
  </>
);

Result

Loading...

Register state

Live Editor

const storeId = "registerState"; register(storeId, { state: ({ set }) => ({ counter: 0, inc: () => set(state => void state.counter++), dec: () => set(state => void state.counter--) }) }); render( <> <State from={storeId}> {({ counter, inc, dec }) => ( <> <div>Counter: {counter}</div> <button onClick={inc}>+</button> <button onClick={dec}>-</button> </> )} </State> <StateInspector from={storeId} /> </> );

const storeId = "registerState";

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

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

Result

Loading...

Register state on a named store

Live Editor

const storeId = "store1"; register(storeId, { state: ({ set }) => ({ counter: 0, inc: () => set(state => void state.counter++), dec: () => set(state => void state.counter--) }) }); render( <> <State from={storeId}> {({ counter, inc, dec }) => ( <> <div>Counter: {counter}</div> <button onClick={inc}>+</button> <button onClick={dec}>-</button> </> )} </State> <StateInspector from={storeId} /> </> );

const storeId = "store1";

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

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

Result

Loading...

State path

Live Editor

const storeId = "statePath"; register(storeId, { state: ({ set }) => ({ more: { stuff: { list: [{ item: "one" }, { item: "two" }] } } }) }); render( <> <State from={storeId} path="more.stuff.list[0].item"> {item => { return <div>{item}</div>; }} </State> <StateInspector from={storeId} /> </> );

const storeId = "statePath";

register(storeId, {
  state: ({ set }) => ({
    more: {
      stuff: {
        list: [{ item: "one" }, { item: "two" }]
      }
    }
  })
});

render(
  <>
    <State from={storeId} path="more.stuff.list[0].item">
      {item => {
        return <div>{item}</div>;
      }}
    </State>
    <StateInspector from={storeId} />
  </>
);

Result

Loading...

State path with default

Live Editor

const storeId = "statePathDefault"; register(storeId, { state: ({ set }) => ({ more: { stuff: { list: [{ item: "one" }, { item: "two" }] } } }) }); render( <> <State from={storeId} path="oops.more.stuff.list[0].item" default="ok"> {item => { return <div>{item}</div>; }} </State> <StateInspector from={storeId} /> </> );

const storeId = "statePathDefault";

register(storeId, {
  state: ({ set }) => ({
    more: {
      stuff: {
        list: [{ item: "one" }, { item: "two" }]
      }
    }
  })
});

render(
  <>
    <State from={storeId} path="oops.more.stuff.list[0].item" default="ok">
      {item => {
        return <div>{item}</div>;
      }}
    </State>
    <StateInspector from={storeId} />
  </>
);

Result

Loading...

State path on a named store using from

Live Editor

const storeId = "statePathNamedStore"; register(storeId, { state: ({ set }) => ({ more: { stuff: { list: [{ item: "one" }, { item: "two" }] } } }) }); render( <> <State from={storeId} path="more.stuff.list[0].item"> {item => <div>{item}</div>} </State> <StateInspector from={storeId} /> </> );

const storeId = "statePathNamedStore";

register(storeId, {
  state: ({ set }) => ({
    more: {
      stuff: {
        list: [{ item: "one" }, { item: "two" }]
      }
    }
  })
});

render(
  <>
    <State from={storeId} path="more.stuff.list[0].item">
      {item => <div>{item}</div>}
    </State>
    <StateInspector from={storeId} />
  </>
);

Result

Loading...

Multiple select

Live Editor

const storeId = "multipleSelect"; register(storeId, { state: ({ set }) => ({ counter: 0, inc: () => set(state => void state.counter++), dec: () => set(state => void state.counter--) }) }); const selectCounter = ({ counter }) => counter; const selectActions = ({ inc, dec }) => ({ inc, dec }); render( <div> <State from={storeId} select={selectCounter}> {counter => ( <> <div>Counter: {counter}</div> <State from={storeId} select={selectActions}> {({ inc, dec }) => ( <Fragment> <button onClick={inc}>+</button> <button onClick={dec}>-</button> </Fragment> )} </State> </> )} </State> <StateInspector from={storeId} /> </div> );

const storeId = "multipleSelect";

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

const selectCounter = ({ counter }) => counter;
const selectActions = ({ inc, dec }) => ({ inc, dec });

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

Result

Loading...