faq-viewer

React component for viewing FAQs

Example

Check out the example running on github pages

Install

npm install --save faq-viewer

Usage

import React, { Component } from 'react'

import FAQViewer from 'faq-viewer'

const questions = [
  {
    title: "Use Component",
    question: "Can I use this component for my project?",
    answer: "Yes",
    tags: ["category1"],
  }
]

class Example extends Component {
  render () {
    return (
      <FAQViewer questions={questions} />
    )
  }
}

Props

| Property | Type | Required | Default value | Description | | ----------------- | ------- | -------- | -------------------------- | ----------------------------------------------- | | title | string | no | Frequently Asked Questions | The component title | | questionLabel | string | no | Question: | Bold label before long question | | answerLabel | string | no | Answer: | Bold label before answer | | questions | array | yes | | Either empty array or array of question objects | | enableSearch | boolean | no | true | Should the component show search bar? | | searchPlaceholder | string | no | Search for content or tags | Search input placeholder text | | searchHelperText | string | no | questions shown | Text for showing number of search results |

Question Object

The question objects are of the following shape:

{
  title: "title of the question",
  question: "question text",
  answer: "answer text",
  tags: ["tag1", "tag2"], // Array of strings, can be empty
  links: [], // Array of link objects
}

Link Objects

The link objects are added as ordered list of links. They have the following shape:

{
  text: "Link text",
  link: "www.example.com",
}

Attributions

Icons

Material Icons are used.

License

MIT © ntnuikoiene