https://github.com/alim1496/react-faq-generator
A simple FAQ section generator for React applications.
https://github.com/alim1496/react-faq-generator
faq react rollup typecsript vitest
Last synced: about 1 year ago
JSON representation
A simple FAQ section generator for React applications.
- Host: GitHub
- URL: https://github.com/alim1496/react-faq-generator
- Owner: alim1496
- License: mit
- Created: 2023-08-02T06:37:27.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-15T07:48:31.000Z (almost 3 years ago)
- Last Synced: 2025-03-22T20:25:33.688Z (about 1 year ago)
- Topics: faq, react, rollup, typecsript, vitest
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-faq-generator
- Size: 119 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-faq-generator
This repository contains a simple Frequently Asked Questions Section generator in React applications.
## Installation
### NPM
```sh
npm install react-faq-generator
```
### YARN
```sh
yarn add react-faq-generator
```
## Usage
```js
import React from 'react'
import FAQGenerator from 'react-faq-generator'
const MyApp = () => {
const data = [
{
id: 1,
question: 'What was the main cause of World War I?',
answer: 'World War I began after the assassination of Austrian archduke Franz Ferdinand by South Slav nationalist Gavrilo Princip on June 28, 1914.'
},
{
id: 2,
question: 'What countries fought in World War I?',
answer: 'The war pitted the Central Powers (mainly Germany, Austria-Hungary, and Turkey) against the Allies (mainly France, Great Britain, Russia, Italy, Japan, and, from 1917, the United States).'
},
{
id: 3,
question: 'How was trench warfare used in World War I?',
answer: 'The widespread use of machine guns and rapid-firing artillery pieces on the Western Front meant that any exposed soldier was vulnerable.'
}
]
return (
)
}
export default MyApp
```
## Live Demo
You can check the live demo [here](https://codesandbox.io/s/funny-https-vjdt49?file=/src/App.tsx)
## Properties
| Property | Type | Default Value | Description |
|-------------|-----------------|------------------------|----------------------------------------------------------------------------|
| `data` | array of object | null | An array of questions & answers to be displayed. This prop must be passed. |
| `title` | string | 'FAQ' | The title of the FAQ section. |
| `className` | string | '' | The name of the class containing customm css rules to be applied. |
| `darkMode` | boolean | false | If in dark mode then pass this prop as `true`. |
## License
MIT © [alim1496](https://github.com/alim1496)