Types for Typescript users of react-quiz-component (.d.ts)

[d3vAdv3ntur3s]

Nice job with the library, I was trialing the component, doesn't quite fit for my use case, but I thought it might be useful to have some Types to assist for Typescript users. Quickly put this together whilst I was trying out the component, hopefully helpful to you if not onlookers.

File: react-quiz-component.d.ts

    declare module 'react-quiz-component' {
      import { ReactElement } from 'react';

      type QuestionType = "text" | "photo"

      type AnswerSelectionType = "single" | "multiple"

      type Question = {
          question: string
          questionType: QuestionType
          answers: string[]
          correctAnswer: string
          answerSelectionType: AnswerSelectionType
          messageForCorrectAnswer?: string
          messageForIncorrectAnswer?: string
          explanation?: string
          point?: string
          segment?: string
      }

      type QuizStructure = {
          quizTitle: string
          questions: question[]
      }

      type QuizProps = {
          quiz: QuizStructure;
          disableSynopsis?: boolean;
          shuffleAnswer?: boolean;
          shuffle?: boolean;
          showDefaultResult?: boolean;
          showInstantFeedback?: boolean;
          continueTillCorrect?: boolean;
          timer?: number;
          allowPauseTimer?: boolean
      }

      const Quiz: (props: QuizProps) => ReactElement;
      export default Quiz;
  }
`

[diegoroccia]

@d3vAdv3ntur3s thank you for this! I am using this library in one project of mine and I want to add the types. can I do it outside of the library?

[d3vAdv3ntur3s]

@diegoroccia Yes that's what I've done here if I'm understanding what you mean.

The declare module just needs to match the name of the library that you are adding the types for.

Good luck ^_^