react-quiz-wizard is a react component that gives handy access to quiz data combined with wizard. Behind the scenes it uses context api, so data can be accessed at any level in component tree. Most basic hooks are useQuiz and useStepper.

Install

npm i react-quiz-wizard

Features

Quick Start

Wrap your app inside QuizProvider. (It asks for questions array to initialize with.) and don't forget to import css file.

import React from "react";
import { QuizProvider, Question } from "react-quiz-wizard";
import "react-quiz-wizard/dist/index.css";

// typings for question
const questions: Array<Question> = [];

function App() {
  return (
    <QuizProvider questions={questions}>
      {/* rest of your code here */}
    </QuizProvider>
  );
}
export default App;

Now create your Stepper component and put it inside QuizProvider.

import React from 'react';
import { Stepper, useQuiz } from 'react-quiz-wizard';

function QuizStepperDemo () {
  const { state } = useQuiz();

  return (
    <Stepper>
      {state.questions.map((question) => ...)}
      {
        /**
        * map through all questions and render appropriate input
        * (multi choice or single choice based on question.type)
        * only one question will be active depending on the step value
        */
      }
    </Stepper>
  )
}

export default App

Using useQuiz

const { state, dispatch, getQuestion, getSavedAnswer, generateReport } =
  useQuiz();

| Name | Type | Description | | -------------- | :-------------------------: | :------------------------------------------------------------------------------ | | state | QuizState | contains user info, user inputs and questions data. | | dispatch | React.Dispatch | saveUser: (payload: User) => void saveQuestionAnswer: (payload: UserInput) | | getSavedAnswer | func | (questionId) => number or number[] or "" | | getQuestion | func | (questionId: number) => SimplifiedQuestion | | generateReport | func | () => ReportState |

Using useStepper

const { step, handleNext, handleBack, goToStep, isLastStep } = useStepper();

| Name | Type | Description | | ---------- | :----------: | :--------------------------------------------------------------- | | step | number | Index of the active question. | | handleNext | VoidFunction | Renders next question on screen. | | handleBack | VoidFunction | Renders previous question on screen. | | goToStep | func | (index: number) => void goes to specific question provided. | | isLastStep | boolean | checks if it is a last step. |

It is possible to bind handleBack and handleNext to on click event, to go to next previous and next question respectively.