Skip to main content
React 1.0.0-rc.1

React Examples

Use this page as a guide to common React integration scenarios.

React examples focus on wiring and component patterns. For runtime internals, pair them with Core docs.

Example Scenarios​

1. Basic createJourney Setup​

What it shows:

  • createJourney(definition, options?)
  • separate views
  • JourneyProvider
  • StepRenderer

Start from: /docs/react/quickstart

2. Provider-Free Hooks​

What it shows:

  • useJourneySnapshot()
  • useJourneyApi()
  • useJourneySelector()
  • useJourneyEvent()

Use this when components need machine state or actions but are not part of step rendering.

3. Controlled Navigation​

What it shows:

  • goToNextStep
  • goToPreviousStep
  • goToLastVisitedStep
  • explicit event sending via api.send(...)

Runtime semantics live in: /docs/core/api and /docs/core/history

4. Async UI​

What it shows:

  • reading snapshot.async
  • loading and error rendering
  • clearStepError

Runtime async rules live in: /docs/core/async

5. Step Metadata Reads​

What it shows:

  • getStepMeta(stepId) from React actions or selectors

Step metadata semantics live in: /docs/core/api

6. Devtools Bridge Integration​

What it shows:

  • passing journey.machine to attachJourneyDevtools(...)

7. Inside-Component Journey Creation​

What it shows:

  • useMemo(() => createJourney(...), [])
  • disposeOnUnmount for provider-owned cleanup

Full Integration Reference​

For an end-to-end setup across core, react, and the devtools bridge, see the demo app in this repository.