React FAQ Component with Semantic HTML

Include FAQ schema.org | google rich snippet optimization

DEMO: https://react-faq-component-semantic-html-demo.vercel.app/

• You must install the peerDependencies for the component to work (ignore if you already have them added to your project). Read CHAGELOG.md

The component is made with semantic HTML, using the <details></details> and <summary></summary> tags.

The component receives the props:

prop	type	isRequired	Options	Comments
data	Array	✔️		see example below
theme	String	❌	dark, green, netflix, blue, purple or custom	if you pass "custom" you must pass an object in the "customTheme" prop
customTheme	Object	❌ or ✔️		only if “custom” is passed on “theme” prop.
schemaName	String	✔️		for google bot purposes

How to use:

install using npm install react-faq-component-semantic-html

import FAQComponent from  'react-faq-component-semantic-html'

const App = ()=>{
	return (
		<FAQComponent
			data={data}
			theme="green"
			customTheme={theme}
			schemaName="FAQ Page"
		/>
	)
}

Data Example:

const  data  = [
{
	title: "Why This Price?",
	paragraph:'Because we buy the products together with other users, we can offer an affordable price for people who want to try the software. " **Please note that we are under no obligation to provide personalized assistance", But we do everything possible so that the installation / start-up process of the product is successful.',
	colors: {
		title: "red",
		paragraph: "white"
		}
},
{
	title: "How many devices are available to use?",
	paragraph: "As many as you want, we do not limit the devices to use."
},
{
	title: "Don't receive product after payment?",
	paragraph:
	"Our delivery system is semi-automatic, sometimes the delivery take more time was expected.",
	colors: {
		title: "#f09",
		paragraph: "red"
		}
}
];

You can customize text color (for the question and the answer), by passing a colors:{} property in the JSON object of the question

colors: {
	title: "#f09",
	paragraph: "#00ff51"
}

Theme Example:

const  theme  = {
	background: `#09f`,
	color: `#red`,
	borderBottom: `.1px solid #fff`
};