メインコンテンツまでスキップ

FAQブロック

FAQコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなFAQアコーディオンです。モダンなデザインパターン、展開/折りたたみ可能なセクション、柔軟なカスタマイズオプションを備えた完全なよくある質問インターフェースを提供します。

🚀 インストール​

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

📖 使用法​

import {FAQ} from '@nodeblocks/frontend-faq-block';
function BasicFAQ() {
  const faqItems = [
    {
      question: "このサービスは何ですか？",
      answer: "これはビジネス運営を効率的に管理するのに役立つ包括的なプラットフォームです。"
    },
    {
      question: "どのように始めればよいですか？",
      answer: "アカウントにサインアップし、プロファイルを完成させれば、すぐにすべての機能を使い始めることができます。"
    },
    {
      question: "無料トライアルはありますか？",
      answer: "はい、すべての機能に完全にアクセスできる14日間の無料トライアルを提供しています。クレジットカードは不要です。"
    },
    {
      question: "サポートに連絡するにはどうすればよいですか？",
      answer: "メール、ライブチャット、または営業時間内にサポートホットラインに電話することでサポートチームに連絡できます。"
    }
  ];

  return (
    <FAQ
      faqTitle="よくある質問"
      subtitle="私たちのサービスに関する最も一般的な質問への回答を見つけてください"
      items={faqItems}>
      <FAQ.Title />
      <FAQ.ItemList />
    </FAQ>
  );
}

🔧 プロパティリファレンス​

メインコンポーネントプロパティ​

プロパティ型デフォルト説明
faqTitleReactNode必須FAQセクションの上部に表示されるメインタイトル
subtitleReactNode必須メインタイトルの下に表示されるサブタイトルまたは説明
itemsArray<{question: string, answer: string}>必須質問と回答を含むFAQアイテムの配列
classNamestringundefinedFAQコンテナのスタイリング用の追加CSSクラス名
childrenBlocksOverrideundefinedデフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: メインコンポーネントはすべてのHTML div要素プロパティを継承します。

サブコンポーネント​

FAQコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

FAQ.Title​

プロパティ型デフォルト説明
childrenReactNodeコンテキストのfaqTitleメインタイトルとして表示するコンテンツ（コンテキストのfaqTitleをオーバーライド）
subtitlestringコンテキストのsubtitle表示するサブタイトルテキスト（コンテキストのsubtitleをオーバーライド）

注意: このコンポーネントはすべてのHTML div要素プロパティを継承します。

FAQ.Item​

プロパティ型デフォルト説明
questionstring必須アコーディオンヘッダーに表示する質問テキスト
answerstring必須アコーディオンが展開されたときに表示する回答テキスト
indexnumber必須FAQリスト内のこのアイテムのインデックス
isActiveboolean必須このアコーディオンアイテムが現在展開されているかどうか
onToggle(index: number) => void必須アコーディオンの状態を切り替えるコールバック関数

注意: このコンポーネントはすべてのHTML div要素プロパティを継承します。

FAQ.ItemList​

プロパティ型デフォルト説明
subtitlestringコンテキストのsubtitle表示するサブタイトルテキスト（コンテキストのsubtitleをオーバーライド）

注意: このコンポーネントはすべてのHTML div要素プロパティを継承します。FAQ.Itemコンポーネントのリストをレンダリングします。

🔧 TypeScriptサポート​

包括的な型定義による完全なTypeScriptサポート：

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

// 個別FAQアイテムインターフェース
interface FAQItem {
  question: string;
  answer: string;
}

// メインコンポーネントインターフェース
interface FAQProps extends Omit<ComponentProps<'div'>, 'children'> {
  faqTitle: ReactNode;
  subtitle: ReactNode;
  items: FAQItem[];
  className?: string;
}

// カスタムデータ使用例
const faqData: FAQItem[] = [
  {
    question: 'どのような支払い方法を受け付けていますか？',
    answer: '主要クレジットカード、PayPal、銀行振込をすべて受け付けています。',
  },
  {
    question: 'サブスクリプションをキャンセルするにはどうすればよいですか？',
    answer: 'アカウント設定からいつでもサブスクリプションをキャンセルできます。',
  },
];

// カスタムスタイリング付き高度な例
function CustomFAQ() {
  return (
    <FAQ
      faqTitle="カスタマーサポート"
      subtitle="よくある質問への迅速な回答を得る"
      items={faqData}
      className="my-custom-faq">
      <FAQ.Title className="custom-title" subtitle="あなたの成功をサポートします">
        🙋‍♀️ よくある質問
      </FAQ.Title>
      <FAQ.ItemList className="custom-item-list" />
    </FAQ>
  );
}

React、TypeScript、モダンWebスタンダードを使用して❤️で構築されました。