🫨 React FAQ List

A modern, accessible, and customizable FAQ component for React applications.
Perfect for product pages, help centers, and onboarding flows. Built for performance and developer experience.

✨ Overview

react-faq-list provides a plug-and-play FAQ (Frequently Asked Questions) accordion component with zero dependencies. Designed with customization, accessibility, and simplicity in mind — this component works out of the box with just a few lines of code.

🌟 Features

• ✅ Simple integration with any React project
• ✅ Fully responsive across devices
• ✅ Minimal configuration required
• ✅ Highly customizable via props
• ✅ No third-party dependencies
• ✅ Keyboard and screen reader accessible (WAI-ARIA ready)

📦 Installation (If you find this package useful, consider buying me a coffee ☕ )

npm install react-faq-list
# or
yarn add react-faq-list

🚀 Getting Started

import ReactFaqList from 'react-faq-list';

const faqs = [
  {
    question: 'Is this component responsive?',
    answer: 'Yes, it works seamlessly on mobile and desktop devices.',
  },
  {
    question: 'Can I use custom styles?',
    answer: 'Absolutely. Style each question and answer block using inline styles or your own CSS.',
  },
];

export default function FAQSection() {
  return (
    <ReactFaqList
      data={faqs}
      questionKeyName="question"
      answerKeyName="answer"
      questionStyles={{ fontSize: '18px', fontWeight: '600', color: '#0078D4' }}
      answerStyles={{ fontSize: '16px', lineHeight: '1.5' }}
    />
  );
}

🧩 Component Props

| Prop | Type | Description | Required | |-------------------|----------|----------------------------------------------------------------------|----------| | data | array | Array of objects containing FAQ entries | ✅ | | questionKeyName | string | Property name in each object for the question text | ✅ | | answerKeyName | string | Property name in each object for the answer text | ✅ | | questionStyles | object | Optional inline styles for the question text | ❌ | | answerStyles | object | Optional inline styles for the answer text | ❌ |

☕ Support the Developer

Support the project by buying me a coffee ☕
Your support helps maintain and improve this project!

👀 Live Demo

Explore the component in action:
🔗 Open Stackblitz Demo

🛠️ Use Cases

• Landing page FAQs
• Support/help center widgets
• Product comparison pages
• SaaS onboarding flows

👤 Author

Created by Mohit Kapoor

📄 License

This project is licensed under the MIT License.