Skip to main content

Subsection Flow

A flow that lives inline inside a page — no modal, no overlay. Useful for multi-step forms, inline confirmations, or collapsible wizards embedded in a larger UI.

Click Begin Checkout below to start the flow directly on this page.

Result
Loading...
Live Editor

How it works​

  1. The IdleContent component is passed as children of <SequentOutlet /> — it renders as idle content until a flow is active.
  2. IdleContent calls useSequentContext() to check if a previous flow completed — if so, the button reads "Begin Checkout Again".
  3. Clicking the button calls init(() => StepAddress), which replaces the idle children with StepAddress inside the outlet.
  4. Each step calls advance(NextStep) to move forward or retreat() to go back.
  5. StepReview calls resolve(value) — useSequentFlow().result captures the resolved value, the outlet returns to idle, and the IdleContent reappears with the updated button label.
  6. The outlet's transition render prop crossfades between steps — the outgoing step animates out while the incoming step animates in.

Key points​

  • Idle children — the outlet renders its children when no flow is active. Idle children have access to useSequentContext, which returns the last consumer context from the previous flow (or undefined on first render).
  • No central state — each step decides what comes next via advance(NextStep).
  • History is automatic — retreat() pops the history stack with no manual bookkeeping.
  • Animated transitions — crossfade() from react-sequent/transitions crossfades between steps, wiring onAnimationEnd to the outlet's exit completion signal.
  • The outlet is reusable — the same useSequentFlow() host can start a fresh flow with another init() call.