Interface Step<StepSlugs, State, Metadata, Slug>

A step in the journey, as defined by the developer.

Type Parameters

Hierarchy

  • Step

Properties

component enableNextButton? isComplete? isEnabled? isJourneyEnd? isSkipped? isSubmittable? nextStep? previousStep? showNextButton? showPreviousButton? showSubmitButton? slug

Properties

component

component: ComponentType<ComponentProps<State, Metadata>>

The component to render for the step. This is the component that will be rendered when the user is on this step.

Optional enableNextButton

enableNextButton?: ((state, steps) => boolean)

Type declaration

    • (state, steps): boolean

    • Whether to enable the 'next' button in the journey. This is different from showNextButton in that it only disables the button, but still shows it.

      Parameters

      • state: State
      • steps: ComputedSteps<StepSlugs, State, Metadata, StepSlugs>

      Returns boolean

      Default

      true if the current step is complete

Optional isComplete

isComplete?: ((state, steps) => boolean)

Type declaration

    • (state, steps): boolean

    • Whether the step is complete.

      Parameters

      • state: State
      • steps: ComputedSteps<StepSlugs, State, Metadata, StepSlugs>

      Returns boolean

      Default

      true

Optional isEnabled

isEnabled?: ((state, steps) => boolean)

Type declaration

    • (state, steps): boolean

    • Whether the step is enabled. If disabled, the step will not show up in the journey. This is useful for steps that are only shown conditionally.

      Parameters

      • state: State
      • steps: ComputedSteps<StepSlugs, State, Metadata, StepSlugs>

      Returns boolean

      Default

      true

Optional isJourneyEnd

isJourneyEnd?: ((state, steps) => boolean)

Type declaration

    • (state, steps): boolean

    • Whether this step represents the end of the journey. If so, the 'next' button will not be shown in the journey. This is useful for steps that represent a 'thank you' page or a 'success' page.

      Parameters

      • state: State
      • steps: ComputedSteps<StepSlugs, State, Metadata, StepSlugs>

      Returns boolean

      Default

      true if the step is the last step in the journey, taking into account skipped steps

Optional isSkipped

isSkipped?: ((state, steps) => boolean)

Type declaration

    • (state, steps): boolean

    • Whether the step is skipped. If skipped, the step won't be considered when hitting 'previous' or 'next'. This is useful for steps that are only shown conditionally.

      Parameters

      • state: State
      • steps: ComputedSteps<StepSlugs, State, Metadata, StepSlugs>

      Returns boolean

      Default

      false

Optional isSubmittable

isSubmittable?: ((state, steps) => boolean)

Type declaration

    • (state, steps): boolean

    • Whether the step is submittable. If not submittable, the 'submit' / 'next' button will not be shown in the journey. This is useful for the last step in the journey. It should not be used to prevent the user from submitting the form if the step is not complete. For that, use isComplete instead.

      Parameters

      • state: State
      • steps: ComputedSteps<StepSlugs, State, Metadata, StepSlugs>

      Returns boolean

      Default

      true

Optional nextStep

nextStep?: ((state, logicalNextStep, steps) => undefined | StepSlugs)

Type declaration

    • (state, logicalNextStep, steps): undefined | StepSlugs

    • The next step in the journey. This is used to navigate to the next step when the user clicks the 'next' button.

      Parameters

      • state: State
      • logicalNextStep: undefined | StepSlugs
      • steps: ComputedSteps<StepSlugs, State, Metadata, StepSlugs>

      Returns undefined | StepSlugs

      Default

      the next step in the journey, taking into account skipped steps

Optional previousStep

previousStep?: ((state, logicalPreviousStep, steps) => undefined | StepSlugs)

Type declaration

    • (state, logicalPreviousStep, steps): undefined | StepSlugs

    • The previous step in the journey. This is used to navigate to the previous step when the user clicks the 'previous' button.

      Parameters

      • state: State
      • logicalPreviousStep: undefined | StepSlugs
      • steps: ComputedSteps<StepSlugs, State, Metadata, StepSlugs>

      Returns undefined | StepSlugs

      Default

      the previous step in the journey, taking into account skipped steps

Optional showNextButton

showNextButton?: ((state, steps) => boolean)

Type declaration

    • (state, steps): boolean

    • Whether to show the 'next' button in the journey.

      Parameters

      • state: State
      • steps: ComputedSteps<StepSlugs, State, Metadata, StepSlugs>

      Returns boolean

      Default

      true if the step is not the last step in the journey, taking into account skipped steps

Optional showPreviousButton

showPreviousButton?: ((state, steps) => boolean)

Type declaration

    • (state, steps): boolean

    • Whether to show the 'previous' button in the journey.

      Parameters

      • state: State
      • steps: ComputedSteps<StepSlugs, State, Metadata, StepSlugs>

      Returns boolean

      Default

      true if the step is not the first step in the journey, taking into account skipped steps

Optional showSubmitButton

showSubmitButton?: ((state, steps) => boolean)

Type declaration

    • (state, steps): boolean

    • Whether to show the 'submit' button in the journey.

      Parameters

      • state: State
      • steps: ComputedSteps<StepSlugs, State, Metadata, StepSlugs>

      Returns boolean

      Default

      true if the step is the last step in the journey, taking into account skipped steps

slug

slug: Slug

The slug of the step. This is used to identify the step and to navigate to it.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc