Navigation & Rendering

Rendering a workflow is similar to rendering a form, but with additional components for handling multi-step navigation.

The <Workflow> Component

This is the main component that wraps your entire workflow. It takes the workflowConfig and manages all the internal state.

import { Workflow } from '@rilaykit/workflow';

function MyWorkflowPage() {
  const handleComplete = (data) => {
    console.log('Workflow completed with data:', data);
    // e.g., redirect to a success page
  };

  const handleStepChange = (fromStepIndex, toStepIndex) => {
    console.log(`Moved from step ${fromStepIndex} to ${toStepIndex}`);
  };

  return (
    <Workflow
      workflowConfig={workflowConfig}
      onWorkflowComplete={handleComplete}
      onStepChange={handleStepChange}
      defaultValues={{ ... }}
      user={{ ... }} // Optional user context
    >
      {/* Workflow layout components go here */}
    </Workflow>
  );
}

Props

• workflowConfig: The configuration generated by the flow builder.
• onWorkflowComplete: A callback fired when the user successfully completes the final step. It receives an object containing all the data collected from all steps.
• onStepChange (optional): A callback fired whenever the user navigates between steps.
• defaultValues (optional): An object to pre-fill the workflow with initial data.
• user (optional): An arbitrary user object that can be passed to analytics or other custom logic.

Layout & Navigation Components

Inside the <Workflow> component, you assemble a set of components to create your UI. These components require that you have set their corresponding renderers on the ril instance.

• <WorkflowBody>: Renders the form content for the current active step.
• <WorkflowStepper>: Renders the step progress indicator.
• <WorkflowNextButton>: The primary action button. On any step but the last, it validates and moves to the next step. On the last step, it validates and triggers onWorkflowComplete.
• <WorkflowPreviousButton>: Moves to the previous step. It's automatically hidden on the first step or if back navigation is disabled.
• <WorkflowSkipButton>: Skips the current step if allowSkip: true is set in the step's configuration. It's hidden otherwise.

Example Layout

You have full control over where you place these components.

<Workflow {...props}>
  {/* Show progress at the top */}
  <WorkflowStepper />

  {/* Main content area */}
  <div className="workflow-content">
    <WorkflowBody />
  </div>

  {/* A footer with navigation controls */}
  <footer className="workflow-footer">
    <WorkflowPreviousButton>Go Back</WorkflowPreviousButton>

    <div className="right-actions">
      <WorkflowSkipButton>Skip</WorkflowSkipButton>
      <WorkflowNextButton>
        {({ isLastStep }) => (isLastStep ? 'Finish Signup' : 'Continue')}
      </WorkflowNextButton>
    </div>
  </footer>
</Workflow>