# react-tag-quiz

> A react quiz interface that will collect the answers, run them through a function of your choice and display the result to the user.

Latest version **0.1.1** (published 2021-04-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-tag-quiz
pnpm add react-tag-quiz
yarn add react-tag-quiz
bun add react-tag-quiz
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-04-19 |
| First published | 2021-03-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 896.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ryan Margheriti |
| Maintainers | ryanmargheriti |

## Links

- npm: https://www.npmjs.com/package/react-tag-quiz
- npm.io page: https://npm.io/package/react-tag-quiz

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.12.13

## Recent versions

- 0.1.1 (latest) — 2021-04-19
- 0.0.18 — 2021-04-19
- 0.0.17 — 2021-04-06
- 0.0.16 — 2021-04-06
- 0.0.15 — 2021-04-06
- 0.0.14 — 2021-04-06
- 0.0.13 — 2021-03-24
- 0.0.12 — 2021-03-23
- 0.0.11 — 2021-03-23
- 0.0.10 — 2021-03-23
- 0.0.9 — 2021-03-23
- 0.0.8 — 2021-03-23
- 0.0.7 — 2021-03-23
- 0.0.6 — 2021-03-23
- 0.0.5 — 2021-03-22
- … 4 more at https://npm.io/package/react-tag-quiz/versions

## README

UI to create a series of questions with multiple choice answers that get fed into a simple function that outputs the results. BYO function.

# Installation
- `npm install react-tag-quiz`
- `import Quiz from 'react-tag-quiz`
# Sample Usage
```
<Quiz 
  formData={{questions[...]}}
  introComponent={<div>{children}</div>}
  getResultsFn={answers => {
    // Fetch or generate answers
    // Return answers object
  }}
  theme={{
    section: {
      color: '#fff',
    },
    color: {
      background: 'tomato',
      foreground: '#fff',
    },
  }}
/>
```

## Required Props

Prop Name | Type | Example
--------- | --- | ---
`formData` | Object | <code lang="json">{questions: [{label: 'What is your favourite colour?',options: [{ key: 'red', label: 'Red' },{ key: 'blue', label: 'Blue' },],},{...}],}</code>
`introComponent` | Component | `<div><h1>Want to do the questionnaire? Click the button below to get started</h1>{children}</div>`
`getResultsFn` | Function | `(selectedValues) => {}`


## Optional Props
Prop Name | Type | Default
--------- | --- | ---
`button` | Component | ?
`startLabel` | String | "Start"
`nextLabel` | String | "Next"
`loadingMessage` | String | "Loading your results..."
`finishLabel` | String | "Get Results"
`height` | String | "65vh"
`resultsComponent` | Component | ?
`theme` | Object | <code lang="json">{}</code>
`resetSelectionsOnRestart` | Boolean | true


### Developing locally
- Create a symlink for this repo. From this directory `npm link`
- To use it in another project, from _that_ directory, run `npm link ../[path_to_this_repo]` 
- There will also likely be missing react/styled-component messages. If so, `npm link react` from this directory should fix
- If there are subseuqne tmessages about invalid react hook calls, it is likely that the consuming project is seeing two versions of react. To fix this temporarily, from this directory `npm link ../[path_to_consumer_project]/node_modules/[react|react-dom|styled-components]`. See [here](https://reactjs.org/warnings/invalid-hook-call-warning.html).

---
_Source: https://npm.io/package/react-tag-quiz · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._