QuizResult

Purpose

The outcome screen. Renders nothing while the funnel is in progress; once the engine reaches "complete", renders its children with the full answers map passed to a render-prop, so you can compute a score, recommendation, or segment from everything collected.

Installation

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

Usage

<QuizResult>
  {(answers) => (
    <p>
      Recommended plan: {scorePlan(answers)}. Sending details to {answers.email}
      .
    </p>
  )}
</QuizResult>

Fixed content also works if you don't need the answers:

<QuizResult>
  <p>Thanks for completing the quiz!</p>
</QuizResult>

Props

Prop	Type	Default	Description
`children`	`ReactNode \| ((answers: QuizAnswers) => ReactNode)`	—	Rendered only once complete.
`className`	`string`	—	Merged onto the wrapper.

Notes

Typically the last step's type in your QuizStep switch — give the final step in your QuizDefinition a type like "result" with no next, and render <QuizResult> for that case.