React Faq Schema

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>

Features

• 🚀 Extremely lightweight

• 💅 No predefined styling for minimum component size

• 🔧 From tag name to attribute, everything is extensible

Installation

npm i react-faq-schema

API Reference

props.faqs : Array Object

An array of objects of questions and answers. Default to []. Each object should have the following properties:

props.question : String

The question of that Question.

props.answer : String

The answer of that Question.

props.attr : Object

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.

props.attr.Container : Object

props.attr.Question : Object

props.attr.QuestionText : Object

props.attr.Answer : Object

props.attr.AnswerText : Object

props.tagName : Object

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'
  }
}}