1.0.4 • Published 7 years ago
faq-viewer v1.0.4
faq-viewer
React component for viewing FAQs
Example
Check out the example running on github pages
Install
npm install --save faq-viewerUsage
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