Variable Step`Const`

Step: FC<PropsWithChildren<{ canProceed?: boolean; step: number }>> = ...

Renders its children only when the current step matches the provided step index.

Typically used inside a stepper-based flow (e.g., multistep form or wizard). Integrates with the Stepper context to set whether the step is allowed to proceed.

Example usage:

<Step step={1}>
  <YourStepContent />
</Step>

Param: children

content for the Step

Param: step

The step index at which to render the children.

Param: canProceed

Whether the user is allowed to proceed from this step. Defaults to true.

Returns

The content for the active step, or null if inactive.

Remarks

Must be used within a Stepper context. Automatically calls setCanProceed(step, canProceed) on mount and when canProceed changes.

Source

export const Step: FC<
  PropsWithChildren<{
    step: number
    canProceed?: boolean
  }>
> = ({ children, step, canProceed = true }) => {
  const { currentStep, setCanProceed } = useStepper()

  useEffect(() => {
    setCanProceed(step, canProceed)
  }, [canProceed])

  if (step !== currentStep) return null

  return <>{children}</>
}

Variable StepConst