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. Built on top of MUI components for consistent styling.

πŸš€ Installation​

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

πŸ“– Usage​

import {FAQ} from '@nodeblocks/frontend-faq-block';
Live Editor
function SimpleFAQ() {
  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>
  );
}
Result
Loading...

πŸ”§ 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
sxSxProps<Theme>{ px: 2, py: 5 }MUI system props for custom styling
childrenBlocksOverrideundefinedCustom block components to override default rendering

Note: This component inherits all MUI Stack component props. Default spacing={5}.

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​

Renders the FAQ title section using MUI Stack and Typography components.

PropTypeDefaultDescription
faqTitleReactNodeContext valueTitle content (overrides context)
subtitleReactNodeContext valueSubtitle content (overrides context)
childrenReactNodeContext faqTitleCustom content - overrides faqTitle
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>{ textAlign: 'center' }MUI system props for custom styling

Note: This component inherits all MUI Stack component props. The title is rendered with Typography variant="h6" and color="primary.main". The subtitle is rendered with Typography variant="h4". Internal spacing between title and subtitle is hardcoded to 1.

FAQ.Item​

Renders an individual FAQ accordion item using MUI Accordion.

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
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>undefinedMUI system props for custom styling

Note: This component inherits all MUI Accordion component props (except onToggle). The question displays with a "Q." prefix in primary.main color.

FAQ.ItemList​

Renders the list of FAQ items with dividers using MUI Stack.

PropTypeDefaultDescription
itemsArray<{question: string, answer: string}>Context valueFAQ items array (overrides context)
activeIndexnumber | nullContext valueCurrently active/expanded item index (overrides context)
toggleAccordion(index: number) => voidContext valueToggle callback (overrides context)
classNamestringundefinedAdditional CSS class name for styling
sxSxProps<Theme>undefinedMUI system props for custom styling

Note: This component inherits all MUI Stack component props. Renders a Divider before and after the item list.

🎨 Configuration examples​

Custom Title Styling​

<FAQ.Title 
  sx={{ 
    textAlign: 'left',
    backgroundColor: 'primary.light',
    p: 3,
    borderRadius: 2
  }}>
  Custom FAQ Title
</FAQ.Title>

Custom Item List Styling​

<FAQ.ItemList 
  sx={{ 
    backgroundColor: 'background.paper',
    borderRadius: 2,
    boxShadow: 1,
    p: 2
  }} 
/>

πŸ”§ TypeScript Support​

Full TypeScript support with comprehensive type definitions:

import {FAQ} from '@nodeblocks/frontend-faq-block';
import {StackProps, AccordionProps} from '@mui/material';
import {ReactNode} from 'react';

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

// Main component props extend MUI StackProps
interface FAQProps extends Omit<StackProps, 'children'> {
  faqTitle: ReactNode;
  subtitle: ReactNode;
  items: FAQItem[];
  children?: BlocksOverride;
}

// Example with MUI styling
function CustomStyledFAQ() {
  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.',
    },
  ];

  return (
    <FAQ
      faqTitle="Customer Support"
      subtitle="Get quick answers to common questions"
      items={faqData}
      className="my-custom-faq"
      spacing={4}
      sx={{maxWidth: 800, mx: 'auto'}}
    >
      <FAQ.Title sx={{textAlign: 'left'}}>πŸ™‹β€β™€οΈ Frequently Asked Questions</FAQ.Title>
      <FAQ.ItemList sx={{mt: 2}} />
    </FAQ>
  );
}

πŸ“ Notes​

  • The component uses MUI's Stack for layout with default spacing={5}
  • Default padding is px: 2 (horizontal) and py: 5 (vertical)
  • FAQ items use MUI Accordion with ExpandMore icon
  • The title section displays the main title with variant="h6" in primary.main color
  • The subtitle displays with variant="h4"
  • Questions are prefixed with "Q." in primary.main color with bold styling
  • Divider components are rendered before and after the FAQ item list
  • Only one accordion item can be expanded at a time (controlled by activeIndex state)
  • All sub-components support the sx prop for MUI system styling
  • Block override pattern allows inserting custom blocks between default blocks

Built with ❀️ using React, TypeScript, and MUI.