Skip to main content

FAQ Block

The FAQ Component is a fully customizable and accessible FAQ accordion built with React and TypeScript. It provides a complete frequently asked questions interface with modern design patterns, expandable/collapsible sections, and flexible customization options.

πŸš€ Installation​

npm install @nodeblocks/frontend-faq-block@0.1.2

πŸ“– Usage​

import {FAQ} from '@nodeblocks/frontend-faq-block';
function BasicFAQ() {
  const faqItems = [
    {
      question: "What is this service?",
      answer: "This is a comprehensive platform designed to help you manage your business operations efficiently."
    },
    {
      question: "How do I get started?",
      answer: "Simply sign up for an account, complete your profile, and you can start using all the features immediately."
    },
    {
      question: "Is there a free trial?",
      answer: "Yes, we offer a 14-day free trial with full access to all features. No credit card required."
    },
    {
      question: "How can I contact support?",
      answer: "You can reach our support team through email, live chat, or by calling our support hotline during business hours."
    }
  ];

  return (
    <FAQ
      faqTitle="Frequently Asked Questions"
      subtitle="Find answers to the most common questions about our service"
      items={faqItems}>
      <FAQ.Title />
      <FAQ.ItemList />
    </FAQ>
  );
}

πŸ”§ Props Reference​

Main Component Props​

PropTypeDefaultDescription
faqTitleReactNodeRequiredThe main title displayed at the top of the FAQ section
subtitleReactNodeRequiredThe subtitle or description displayed below the main title
itemsArray<{question: string, answer: string}>RequiredArray of FAQ items, each containing a question and answer
classNamestringundefinedAdditional CSS class name for styling the FAQ container
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: The main component inherits all HTML div element props.

Sub-Components​

The FAQ component provides several sub-components. All sub-components receive their default values from the main component's context and can override these values through props.

FAQ.Title​

PropTypeDefaultDescription
childrenReactNodeContext faqTitleContent to display as the main title (overrides context faqTitle)
subtitlestringContext subtitleSubtitle text to display (overrides context subtitle)

Note: This component inherits all HTML div element props.

FAQ.Item​

PropTypeDefaultDescription
questionstringRequiredThe question text to display in the accordion header
answerstringRequiredThe answer text to display when the accordion is expanded
indexnumberRequiredThe index of this item in the FAQ list
isActivebooleanRequiredWhether this accordion item is currently expanded
onToggle(index: number) => voidRequiredCallback function to toggle the accordion state

Note: This component inherits all HTML div element props.

FAQ.ItemList​

PropTypeDefaultDescription
subtitlestringContext subtitleSubtitle text to display (overrides context subtitle)

Note: This component inherits all HTML div element props. Renders a list of FAQ.Item components.

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {FAQ} from '@nodeblocks/frontend-faq-block';
import {ComponentProps, ReactNode} from 'react';

// Individual FAQ item interface
interface FAQItem {
  question: string;
  answer: string;
}

// Main component interface
interface FAQProps extends Omit<ComponentProps<'div'>, 'children'> {
  faqTitle: ReactNode;
  subtitle: ReactNode;
  items: FAQItem[];
  className?: string;
}

// Example usage with custom data
const faqData: FAQItem[] = [
  {
    question: 'What payment methods do you accept?',
    answer: 'We accept all major credit cards, PayPal, and bank transfers.',
  },
  {
    question: 'How do I cancel my subscription?',
    answer: 'You can cancel your subscription anytime from your account settings.',
  },
];

// Advanced example with custom styling
function CustomFAQ() {
  return (
    <FAQ
      faqTitle="Customer Support"
      subtitle="Get quick answers to common questions"
      items={faqData}
      className="my-custom-faq">
      <FAQ.Title className="custom-title" subtitle="We're here to help you succeed">
        πŸ™‹β€β™€οΈ Frequently Asked Questions
      </FAQ.Title>
      <FAQ.ItemList className="custom-item-list" />
    </FAQ>
  );
}

Built with ❀️ using React, TypeScript, and modern web standards.