FAQブロック

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

---

🚀 インストール

npm install @nodeblocks/frontend-faq-block

---

📖 使用法

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>
  );
}

結果

Loading...

高度な使用法

ライブエディター

function AdvancedFAQ() {
  const faqItems = [
    {
      question: "私たちのプラットフォームの独自性は何ですか？",
      answer: "私たちのプラットフォームは、AI駆動の分析と直感的なデザインを組み合わせて、比類のないビジネスインサイトと自動化機能を提供します。"
    },
    {
      question: "エンタープライズソリューションを提供していますか？",
      answer: "はい、専用サポート、高度なセキュリティ機能、スケーラブルなインフラストラクチャを備えたカスタマイズされたエンタープライズソリューションを提供しています。"
    },
    {
      question: "プラットフォームのセキュリティはどの程度ですか？",
      answer: "銀行レベルの暗号化、多要素認証を実装し、SOC 2 Type IIおよびGDPRを含む業界標準に準拠しています。"
    },
    {
      question: "どのような統合が利用可能ですか？",
      answer: "Slack、Salesforce、HubSpot、Google Workspace、Microsoft 365を含む200以上の人気ビジネスツールと統合しています。"
    }
  ];

  return (
    <FAQ
      faqTitle="エンタープライズソリューション"
      subtitle="ビジネス意思決定者のための包括的な回答"
      items={faqItems}
      className="custom-faq"
      style={{ 
        backgroundColor: '#f8f9fa',
        border: '1px solid #e9ecef',
        borderRadius: '12px',
        padding: '32px',
        maxWidth: '800px',
        margin: '0 auto'
      }}>
      {({ defaultBlocks, defaultBlockOrder }) => ({
        blocks: {
          ...defaultBlocks,
          
          // 🎯 強化されたスタイリング付きカスタムタイトル
          title: {
            ...defaultBlocks.title,
            props: {
              ...defaultBlocks.title.props,
              className: 'custom-title',
              style: {
                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                color: 'white',
                padding: '24px',
                borderRadius: '8px',
                marginBottom: '32px',
                boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
              },
            },
          },
          
          // 📈 カスタム統計セクション
          stats: (
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
              gap: '16px',
              marginBottom: '32px',
              padding: '20px',
              backgroundColor: '#e3f2fd',
              borderRadius: '8px',
              border: '1px solid #bbdefb',
            }}>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1976d2' }}>99.9%</div>
                <div style={{ fontSize: '14px', color: '#666' }}>アップタイム</div>
              </div>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1976d2' }}>24/7</div>
                <div style={{ fontSize: '14px', color: '#666' }}>サポート</div>
              </div>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: '24px', fontWeight: 'bold', color: '#1976d2' }}>200+</div>
                <div style={{ fontSize: '14px', color: '#666' }}>統合</div>
              </div>
            </div>
          ),
          
          // 💬 強化されたスタイリング付きカスタムFAQアイテムリスト
          itemList: {
            ...defaultBlocks.itemList,
            props: {
              ...defaultBlocks.itemList.props,
              className: 'custom-item-list',
              style: {
                backgroundColor: 'white',
                borderRadius: '8px',
                padding: '16px',
                boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
              },
            },
          },
          
          // 🔗 カスタムヘルプセクション
          helpSection: (
            <div style={{
              marginTop: '32px',
              padding: '24px',
              backgroundColor: '#fff3e0',
              borderRadius: '8px',
              border: '1px solid #ffcc02',
              textAlign: 'center',
            }}>
              <h3 style={{ 
                margin: '0 0 16px 0',
                color: '#f57c00',
                fontSize: '20px',
                fontWeight: 'bold'
              }}>
                🤝 さらにサポートが必要ですか？
              </h3>
              <p style={{ 
                margin: '0 0 20px 0',
                color: '#666',
                lineHeight: '1.6'
              }}>
                専門チームがプラットフォームを最大限に活用できるようサポートします。
              </p>
              <div style={{ display: 'flex', justifyContent: 'center', gap: '16px' }}>
                <button style={{
                  padding: '12px 24px',
                  backgroundColor: '#2196f3',
                  color: 'white',
                  border: 'none',
                  borderRadius: '6px',
                  cursor: 'pointer',
                  fontWeight: 'bold',
                }}>
                  📞 デモ予約
                </button>
                <button style={{
                  padding: '12px 24px',
                  backgroundColor: '#4caf50',
                  color: 'white',
                  border: 'none',
                  borderRadius: '6px',
                  cursor: 'pointer',
                  fontWeight: 'bold',
                }}>
                  💬 ライブチャット
                </button>
              </div>
            </div>
          ),
        },
        blockOrder: ['title', 'stats', 'itemList', 'helpSection'],
      })}
    </FAQ>
  );
}

結果

Loading...

---

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

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

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

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

サブコンポーネント

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

FAQ.Title

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

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

FAQ.Item

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

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

FAQ.ItemList

プロパティ	型	デフォルト	説明
subtitle	string	コンテキストの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スタンダードを使用して❤️で構築されました。