QuizStep

Purpose

QuizStep re-renders automatically whenever the engine advances to a new step. Use its render-prop children to switch on step.type and pick which input component to show.

Installation

pnpm dlx shadcn@latest add @quiz-ui/quiz-step

Usage

<QuizStep>
  {(step) =>
    step.type === "choice" ? (
      <QuizChoiceGroup options={step.props.options as any} />
    ) : step.type === "slider" ? (
      <QuizSlider {...step.props} />
    ) : null
  }
</QuizStep>

You can also pass fixed children instead of a render function, if a step's input never varies:

<QuizStep>
  <QuizTextInput label="Your name" />
</QuizStep>

Props

Prop	Type	Default	Description
`children`	`ReactNode \| ((step: QuizStepDefinition) => ReactNode)`	—	The step's answer input.
`showQuestion`	`boolean`	`true`	Whether to render `step.props.question` as a heading above the input.
...rest	`React.HTMLAttributes<HTMLDivElement>`	—	Forwarded to the wrapping `<div>`.

Notes

The question heading only renders if step.props.question is a string — steps without a question prop just render the input.