Rxova
Skip to content

Function: createLinearJourney()

@rxova/journey-react


@rxova/journey-react / createLinearJourney

function createLinearJourney<TContext, TSteps, TPlugins>(definition, options?): LinearJourneyBundle<TContext, LinearStepIdOf<TSteps>, TPlugins>;

Defined in: react/src/create-linear-journey.tsx:71

Creates a linear journey bundle for React around one standalone machine, created right here in the factory — the same shape as the graph bundle, with the linear verbs. TContext is inferred from definition.context (annotate the value, e.g. const initialContext: SignupContext = {...}), the step-id union from the steps tuple; call sites never pass generics.

const signup = createLinearJourney({
name: "signup",
context: initialContext,
steps: ["email", "review", "done"]
});
<signup.Provider views={{ email: <EmailStep />, review: <ReviewStep />, done: <DoneStep /> }}>
<ProgressHeader />
<signup.StepRenderer fallback={<Spinner />} />
<Controls />
</signup.Provider>;
void signup.navigate.goToNextStep(); // from anywhere
const step = signup.useStep(); // from any component

The machine outlives any component: every hook closes over it and works with or without the Provider, non-React code drives it via bundle.machine / bundle.navigate / bundle.updateContext, and unmounting disposes nothing. All Providers and hooks share the one machine, journey state survives remounts (reset explicitly — controls.restart() after a terminal status, terminate() first when mid-flight), and in SSR a module-scope machine is shared across every request in the process — for per-mount or per-request isolation, wrap the factory in useJourney(), which owns and disposes one bundle per component instance.

By default the machine starts when the first Provider or hook mounts, so subscribers attach before the journey’s first stepEnter and SSR renders fallback on both sides. Pass { autoStart: true } to start eagerly here instead — needed for server-rendered step content, and for a bundle driven entirely from non-React code, since nothing mounts to start it. Pass { autoStart: false } to start it yourself with controls.start().

Type ParameterDefault type
TContext-
TSteps extends readonly [ReactLinearStepInput<NoInfer<TContext>, unknown>, ReactLinearStepInput<NoInfer<TContext>, unknown>]-
TPlugins extends readonly AnyJourneyPlugin[]readonly []
ParameterType
definitionLinearJourneyBundleDefinition<TContext, TSteps>
options?LinearJourneyBundleOptions<LinearStepIdOf<TSteps>, TPlugins>

LinearJourneyBundle<TContext, LinearStepIdOf<TSteps>, TPlugins>