A React component that gives you a FAQ section with Microdata markup, so that you can enjoy better SEO performance.
//Use this as a component in your application
<Faq
faqs={[
{
question: 'Hello',
answer: 'World'
}
]}
attr={{
Container: {
id: 'testId',
className: 'class0'
},
Question: {
id: 'testId1',
className: 'class1'
},
Answer: {
className: 'class2'
}
}}
tagName={{
Container: {
tagName: 'div'
},
Question: {
tagName: 'div'
},
QuestionText: {
tagName: 'p'
},
Answer: {
tagName: 'div'
},
AnswerText: {
tagName: 'p'
}
}}
/>
//Result
<div id="testId1" class="class1" itemprop="mainEntity" itemscope="itemscope" itemtype="https://schema.org/Question">
<p itemprop="name">Hello</p>
<div class="class2" itemprop="acceptedAnswer" itemscope="itemscope" itemtype="https://schema.org/Answer">
<p itemprop="text">World</p>
</div>
</div>
-
🚀 Extremely lightweight
-
💅 No predefined styling for minimum component size
-
🔧 From tag name to attribute, everything is extensible
npm i react-faq-schema
An array of objects of questions and answers. Default to []
. Each object should have the following properties:
The question of that Question.
The answer of that Question.
An object that contains attribute for each HTML tag.
This object has the following nested objects. Keys in these objects will be used as the attribute name and values will be used as the attribute value. You can add whatever you want.
attr={{
Container: {
id: 'testId',
className: 'class0'
},
Question: {
id: 'testId1',
className: 'class1'
},
Answer: {
className: 'class2'
}
}}
This will generate attribute id
with 'test1'
as value, and className
with 'class0'
as value.
An object that contains tagName for each HTML tag.
tagName={{
Container: {
tagName: 'div'
},
Question: {
tagName: 'div'
},
QuestionText: {
tagName: 'p'
},
Answer: {
tagName: 'div'
},
AnswerText: {
tagName: 'p'
}
}}