This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Stateful Component

Define components as pure state machines.

Demo

https://stateful-component.vercel.app/

Parameters

initialState: State

The initial state to use.

updateState: (State) => State | null

Accepts state as an argument, returns a modified form or null (to stop transition).

Children: (State) => ReactElement

Renders a component as a function of state.

Example

/**
 * This component increases as you press a button.
 */
<StatefulComponent initialState={{ count: 0 }}>
  {({ count, updateState }) => (
    <div>
      <button
        className="rounded-lg m-4 border-2 p-2"
        onClick={() => updateState({ count: count + 1 })}
      >
        Click me
      </button>
      <p>
        Count: <strong>{count}</strong>
      </p>
    </div>
  )}
</StatefulComponent>