Skip to main content

UI Integration

Retomus makes it easy to bind your machines to React UI elements — ensuring declarative, state-driven interfaces.

🧾 Displaying State​

const status = machine.useStatus();
const count = machine.useState('count');

return (
  <>
    <Text>Status: {status}</Text>
    <Text>Count: {count}</Text>
  </>
);

The UI will automatically update when the machine's context or status changes.

🎮 Triggering Actions​

const increment = machine.useAction('increment');

<Button onPress={() => increment()}>+1</Button>;

You can bind any action to a UI event (click, submit, press, etc.).

🧠 Using Flags for Initialization​

const isReady = machine.useFlag('isReady');

if (!isReady) return <LoadingSpinner />;

Flags like isReady, isReadyCtx, isReadyActions help conditionally render content.

🧪 Using Composite Actions​

const [compositeIncrement] = compositeAction.use();

<Button onPress={() => compositeIncrement()}>Triple +1</Button>;

Composite actions can be defined globally and executed like regular actions.

🔎 Debugging Shared Values​

const sharedValue = machine.useSv('countSharedValue');

console.log('Current value:', sharedValue?.value);

You can log or monitor shared values from context or UI logic.

🧠 Best Practices​

  • Use RetomusWrapper at the root of your app
  • Only read machine values via use* hooks
  • Keep UI logic dumb — offload decisions to the machine

🔗 Related​