syncfusion-react-notifications

Syncfusion React の通知機能の実装

Toast

Syncfusion React の Toast コンポーネントは、設定可能なタイムアウト後に自動的に閉じる、簡潔で邪魔にならない通知を表示します。Toast は、テンプレートによるリッチコンテンツ、アクションボタン、表示・非表示のアニメーション、正確な位置指定、ToastUtility によるプログラム制御に対応しています。

🛑 エージェントの使用時： 複数の手順を自律的に実行しないでください。各アクション（インストール、実行、ファイル作成）の前にユーザーに確認してください。

パッケージとセットアップ

📄 参照： references/getting-started.md

• @syncfusion/ej2-react-notifications のインストール 🛑 停止 — パッケージを自律的にインストールしないでください。ユーザーに次のコマンドを実行するよう依頼してください：npm install @syncfusion/[email protected] --save。npm audit で確認してください
• 必要なすべてのテーマの CSS インポート
• 基本的な ToastComponent の使用方法（クラス型および関数型のパターン）
• カスタムターゲットコンテナーへの Toast のレンダリング
• created イベントでの表示のトリガー

ドキュメントとナビゲーションガイド

設定とレイアウト

📄 参照： references/configuration.md

• title と content の設定（プレーンテキスト、HTML、要素）
• 通知の範囲を限定するカスタム target コンテナー
• 手動で閉じるための showCloseButton
• showProgressBar と progressDirection（Ltr / Rtl）
• newestOnTop によるスタック順序
• width と height のサイズ（px、%、auto）

位置指定

📄 参照： references/position.md

• 9 種類の定義済み X/Y 位置（Left、Center、Right / Top、Bottom）
• ピクセルおよびパーセンテージによるカスタム座標
• 相対位置指定のためのコンテナー要素のターゲット指定
• 画面上の異なる位置に複数の Toast インスタンスを配置

タイムアウトと閉じ方

📄 参照： references/timeout-and-dismissal.md

• timeOut プロパティ（デフォルト：5000 ms）
• ホバー時の extendedTimeout（デフォルト：1000 ms）
• timeOut: 0 による固定表示の Toast
• click イベント内の clickToClose によるクリックで閉じる動作
• beforeClose によるモバイルでのスワイプ終了の防止

テンプレートとスタイル設定

📄 参照： references/templates-and-styling.md

• HTML 文字列および DOM セレクターを使う template プロパティ
• show() の呼び出し時に渡す動的テンプレート
• セマンティック CSS クラス：e-toast-success、e-toast-info、e-toast-warning、e-toast-danger
• タイトル、コンテンツ、アイコン、背景をカスタマイズする CSS セレクター

アニメーション

📄 参照： references/animation.md

• show と hide の効果設定を指定する animation プロパティ
• 使用可能な効果：FadeIn、FadeZoomIn、SlideBottomIn、ZoomIn、FlipLeftUpIn など
• デフォルト：FadeIn / FadeOut
• アクセシビリティ：動きを抑える設定への配慮

Toast サービスと高度なパターン

📄 参照： references/toast-services.md

• コンポーネントをインスタンス化せずに簡単に Toast を表示する ToastUtility.show()
• 4 つの定義済みタイプ：Information、Success、Error、Warning
• 完全な ToastModel を ToastUtility.show() に渡す方法
• beforeOpen での音声再生
• beforeOpen による同時表示可能な Toast の最大数の制限
• beforeOpen と close による Toast の重複防止

アクセシビリティ

📄 参照： references/accessibility.md

• WAI-ARIA：role="alert"、aria-live="assertive"、aria-label
• WCAG 2.2、Section 508、ADA への準拠
• スクリーンリーダーのサポート（JAWS、NVDA、VoiceOver）
• enableRtl による RTL サポート
• モバイルおよびアクセシビリティチェッカーによる検証

API リファレンス

📄 参照： references/api.md

• 型、デフォルト値、説明を含むすべてのプロパティ
• show() と hide() のメソッドシグネチャ
• すべてのイベント：beforeOpen、open、click、beforeClose、close、created、destroyed、beforeSanitizeHtml

クイックスタートの例

🛑 停止 — 開発サーバーを自動で起動しないでください。セットアップ後、ユーザーに npm run dev を実行するよう依頼してください。

import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import '@syncfusion/ej2-base/styles/tailwind3.css';
import '@syncfusion/ej2-react-notifications/styles/tailwind3.css';
import { useRef } from 'react';

function App() {
  const toastRef = useRef<ToastComponent>(null);

  return (
    <>
      <button onClick={() => toastRef.current?.show()}>Show Toast</button>
      <ToastComponent
        ref={toastRef}
        title="Success!"
        content="Your changes have been saved."
        cssClass="e-toast-success"
        position={{ X: 'Right', Y: 'Bottom' }}
        timeOut={4000}
        showProgressBar={true}
        showCloseButton={true}
      />
    </>
  );
}

クイックユーティリティトースト（コンポーネント不要）

import { ToastUtility } from '@syncfusion/ej2-react-notifications';

// Show a success toast instantly
ToastUtility.show('File saved successfully', 'Success', 3000);

// Show an error toast
ToastUtility.show('Connection failed', 'Error', 5000);

よく使われるパターン

セマンティックなタイプのトースト

cssClass に e-toast-success、e-toast-info、e-toast-warning、e-toast-danger を指定して、見た目を区別します。詳細は references/templates-and-styling.md を参照してください。

静的／永続的なトースト

ユーザーが明示的に閉じる必要がある通知には、timeOut: 0 と showCloseButton: true を設定します。詳細は references/timeout-and-dismissal.md を参照してください。

アクションが必要なトースト

buttons プロパティを使って、無視／確認／元に戻すボタンを追加します。詳細は references/configuration.md を参照してください。

重複を防止する

beforeOpen イベントを使って、すでに画面に表示されている重複トーストをキャンセルします。詳細は references/toast-services.md を参照してください。

表示するトーストの最大数を制限する

beforeOpen と element.childElementCount を使って、同時に表示するトーストの数を N 個までに制限します。詳細は references/toast-services.md を参照してください。

メッセージ

Syncfusion の MessageComponent は、アイコンと色による視覚的な重要度インジケーターを備えた、状況に応じたメッセージを表示し、エンドユーザーに重要度やコンテキストを伝えます。5 段階の重要度レベル、3 種類の表示形式、閉じるアイコンによる非表示、カスタムテンプレート、完全なアクセシビリティ対応をサポートしています。

🛑 エージェントによる操作: 複数の手順を自動で実行しないでください。各操作（インストール、実行、ファイル作成）の前にユーザーに確認してください。

ナビゲーションガイド

はじめに

📄 参照: references/message-getting-started.md

• @syncfusion/ej2-react-notifications のインストール 🛑 停止 — パッケージを自動でインストールしないでください。ユーザーに npm install @syncfusion/[email protected] --save を実行するよう依頼してください。npm audit で確認してください。
• CSS のインポートとテーマの設定
• 最初の MessageComponent のレンダリング
• content プロパティまたは JSX の子要素によるコンテンツの指定
• Vite 開発サーバーの実行

重要度レベル

📄 参照: references/message-severities.md

• 5 段階の重要度レベル：通常、成功、情報、警告、エラー
• severity プロパティの使用方法と有効な値
• 視覚的な違い（重要度ごとのアイコンと色）
• 用途に適した重要度の選び方

表示形式

📄 参照: references/message-variants.md

• 3 種類の表示形式：テキスト（デフォルト）、アウトライン、塗りつぶし
• variant プロパティの使用方法
• 表示形式と重要度の組み合わせ
• 視覚的なトレードオフと各形式の使いどころ

アイコンと閉じるアイコン

📄 参照: references/message-icons-and-close.md

• 重要度アイコンの表示設定：showIcon プロパティ（デフォルトは true）
• 重要度アイコンの無効化
• cssClass による CSS の上書きで、重要度アイコンをカスタマイズ
• 閉じるアイコン：showCloseIcon プロパティ（デフォルトは false）
• 非表示コールバック用の closed イベントハンドラー
• visible プロパティによる表示の切り替え

カスタマイズとテンプレート

📄 参照: references/message-customization.md

• コンテンツの配置：左（デフォルト）、中央（e-content-center）、右（e-content-right）
• cssClass による外観のカスタマイズ
• CSS のみでメッセージを表示（JS 不要、HTML + CSS のみ）
• コンテンツテンプレート：JSX 要素、または content プロパティによるレンダー関数
• enableRtl による RTL 対応
• enablePersistence による状態の保持

アクセシビリティ

📄 参照: references/message-accessibility.md

• WCAG 2.2、Section 508、ADA への準拠
• WAI-ARIA 属性（role=alert、aria-label）
• キーボード操作（Tab、Enter／Space）
• スクリーンリーダー対応

API リファレンス

📄 参照： references/message-api.md

• 型、デフォルト値、説明を含むすべてのプロパティ
• メソッド：destroy、getPersistData
• イベント：closed、created、destroyed
• MessageCloseEventArgs インターフェース
• Severity と Variant の列挙値

---

クイックスタート

🛑 停止 — 開発サーバーを自律的に起動しないでください。セットアップ後に、ユーザーに npm run dev を実行するよう依頼してください。

npm install @syncfusion/[email protected] --save
npm audit

/* src/App.css */
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-react-notifications/styles/tailwind3.css';

import { MessageComponent } from '@syncfusion/ej2-react-notifications';
import './App.css';

function App() {
  return (
    <MessageComponent content="Please read the comments carefully" />
  );
}
export default App;

---

よく使われるパターン

重要度メッセージ

<MessageComponent content="Editing is restricted" />
<MessageComponent content="Operation completed" severity="Success" />
<MessageComponent content="Read these notes" severity="Info" />
<MessageComponent content="Check your connection" severity="Warning" />
<MessageComponent content="Submission failed" severity="Error" />

Variant と重要度の組み合わせ

<MessageComponent content="Editing is restricted" variant="Filled" />
<MessageComponent content="Operation completed" severity="Success" variant="Outlined" />
<MessageComponent content="Submission failed" severity="Error" variant="Filled" />

閉じることができるメッセージ

import { useState } from 'react';

function App() {
  const [visible, setVisible] = useState(true);
  return (
    <MessageComponent
      content="Your session will expire soon"
      severity="Warning"
      showCloseIcon={true}
      visible={visible}
      closed={() => setVisible(false)}
    />
  );
}

コンテンツテンプレート

const contentTemplate = () => (
  <div>
    <h4>Build succeeded</h4>
    <p>All 42 tests passed.</p>
  </div>
);

<MessageComponent content={contentTemplate} severity="Success" />

---

Skeleton

Syncfusion React の SkeletonComponent は、読み込み中のコンテンツのレイアウトを模した、アニメーション付きのプレースホルダー形状を描画します。読み込み時間を短く感じさせ、設定可能な形状、シマーアニメーション、完全なアクセシビリティサポートによって、ユーザーに進行状況を伝えます。

パッケージ： @syncfusion/ej2-react-notifications

🛑 エージェントによる操作： 複数の手順を自律的に実行しないでください。各操作（インストール、実行、ファイル作成）の前にユーザーに確認してください。

---

ナビゲーションガイド

はじめに

📄 参照： references/skeleton-getting-started.md

• @syncfusion/ej2-react-notifications のインストール 🛑 停止 — パッケージを自律的にインストールしないでください。ユーザーに npm install @syncfusion/[email protected] --save を実行するよう依頼してください。npm audit で確認してください。
• CSS テーマのインポート（tailwind3）
• height と width を指定した最小限の SkeletonComponent のセットアップ
• Vite/React アプリの実行

形状

📄 参照： references/skeleton-shapes.md

• shape プロパティ：「Circle」「Square」「Rectangle」「Text」（デフォルト）
• 寸法のルール：Circle/Square には width が必須、Rectangle/Text には width と height が必須
• 複数の形状を組み合わせたカードのスケルトンレイアウトの作成
• アバター、画像、テキスト、アイコンのプレースホルダーに適した形状の選択

シマー効果

📄 参照： references/skeleton-shimmer-effect.md

• shimmerEffect プロパティ：「Wave」（デフォルト）、「Pulse」、「Fade」
• 各効果タイプの視覚的な動作
• Pulse 効果を使用したリストのスケルトンの例
• UI のコンテキストに合った効果の選択

スタイルと表示

📄 参照： references/skeleton-styles.md

• カスタム CSS の上書き（波の色、背景、アニメーション速度）に使用する cssClass プロパティ
• 読み込み状態に応じてスケルトンの表示を切り替える visible プロパティ
• スケルトンから実際のコンテンツへの切り替えパターン
• CSS 変数のカスタマイズ

アクセシビリティ

📄 参照： references/skeleton-accessibility.md

• WCAG 2.2、Section 508、ADA に準拠
• WAI-ARIA 属性：role="status"、aria-label、aria-live、aria-busy
• アクセシブルなスケルトン名を指定する label プロパティ
• enableRtl による RTL サポート
• prefers-reduced-motion の設定を尊重

API リファレンス

📄 参照： references/skeleton-api.md

• すべてのプロパティ：cssClass、enablePersistence、enableRtl、height、label、locale、shape、shimmerEffect、visible、width
• メソッド：destroy()
• SkeletonType と ShimmerEffect の列挙値

---

クイックスタート

🛑 停止 — 開発サーバーを自律的に起動しないでください。セットアップ後に、ユーザーに npm run dev を実行するよう依頼してください。

npm install @syncfusion/[email protected] --save
npm audit

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";

import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';
import './App.css';

function App() {
  return (
    <SkeletonComponent height="15px" width="100%" />
  );
}
export default App;

---

よく使われるパターン

プロフィールカードのスケルトン

import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';

function ProfileCardSkeleton() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '16px' }}>
      {/* Avatar placeholder */}
      <SkeletonComponent shape="Circle" width="48px" />
      {/* Name and subtitle placeholders */}
      <div style={{ flex: 1 }}>
        <SkeletonComponent width="60%" height="15px" />
        <br />
        <SkeletonComponent width="40%" height="12px" />
      </div>
    </div>
  );
}
export default ProfileCardSkeleton;

データ読み込み時のスケルトン切り替え

import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';

function DataCard() {
  const [loading, setLoading] = React.useState(true);
  const [content, setContent] = React.useState('');

  React.useEffect(() => {
    setTimeout(() => {
      setContent('Data loaded successfully');
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div>
      {loading ? (
        <SkeletonComponent width="80%" height="20px" />
      ) : (
        <p>{content}</p>
      )}
    </div>
  );
}
export default DataCard;

Pulse 効果付きシマーリスト

import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';

function ListSkeleton() {
  return (
    <ul style={{ listStyle: 'none', padding: 0 }}>
      {[1, 2, 3].map((i) => (
        <li key={i} style={{ display: 'flex', gap: '10px', marginBottom: '12px' }}>
          <SkeletonComponent shape="Circle" width="40px" shimmerEffect="Pulse" />
          <div style={{ flex: 1 }}>
            <SkeletonComponent width="70%" height="14px" shimmerEffect="Pulse" />
            <br />
            <SkeletonComponent width="45%" height="12px" shimmerEffect="Pulse" />
          </div>
        </li>
      ))}
    </ul>
  );
}
export default ListSkeleton;

---

主な Props の概要

Prop	Type	Default	Purpose
shape	'Text' | 'Circle' | 'Square' | 'Rectangle'	'Text'	スケルトンの形状バリエーション
width	string | number	''	幅。Circle／Square では必須です
height	string | number	''	高さ。Rectangle／Text で使用します
shimmerEffect	'Wave' | 'Pulse' | 'Fade'	'Wave'	アニメーションスタイル
visible	boolean	true	スケルトンを表示／非表示にします
cssClass	string	''	カスタム CSS クラス
label	string	'Loading…'	アクセシビリティ用の ARIA ラベル
enableRtl	boolean	false	右から左へのレンダリング
enablePersistence	boolean	false	再読み込み後も状態を保持します

---

Spinner

Syncfusion React Spinner を実装するためのスキルです。処理の進行中に対象要素とのユーザー操作をブロックする、読み込みインジケーターです。

🛑 エージェントによる使用： 複数の手順を自律的に実行しないでください。各操作（インストール、実行、ファイル作成）の前にユーザーに確認してください。

ドキュメント

はじめに

📄 参照： references/spinner-getting-started.md

• インストール：🛑 停止 — パッケージを自律的にインストールしないでください。ユーザーに npm install @syncfusion/[email protected] --save を実行するよう依頼してください。npm audit で確認してください
• CSS テーマのインポート（ej2-base + ej2-react-popups）
• 関数コンポーネントとクラスコンポーネントの基本的なパターン
• createSpinner → showSpinner のワークフロー
• 表示／非表示の制御
• 全ページを覆うオーバーレイ Spinner
• スタイルの欠落や TypeScript エラーのトラブルシューティング

Spinner の機能

📄 参照： references/spinner-features.md

• setSpinner を使用したグローバル Spinner の設定
• すべての SpinnerType の値（Material、Bootstrap5、Fluent2 など）
• width プロパティによる Spinner のサイズ指定
• Spinner の横に表示するラベルテキスト
• カスタム HTML テンプレートのサポート
• 表示／非表示の切り替えパターン
• 1 ページに複数の Spinner を配置
• finally によるクリーンアップを伴う非同期データ取得
• React の状態と Spinner の同期
• カードやモーダル内の Spinner

API リファレンス

📄 参照： references/spinner-api.md

• createSpinner(args: SpinnerArgs) — 完全なシグネチャとパラメーター
• showSpinner(container: HTMLElement) — シグネチャ
• hideSpinner(container: HTMLElement) — シグネチャ
• setSpinner(args: SetSpinnerArgs) — シグネチャ
• SpinnerArgs インターフェイス（target、width、label、cssClass、template、type）
• SetSpinnerArgs インターフェイス（template、cssClass、type）
• すべての 11 種類の SpinnerType の値
• テーマごとの CSS インポートパス
• よくある無効な API の落とし穴

カスタマイズ

📄 参照： references/spinner-customization.md

• CSS フックのカスタマイズに使用する cssClass
• Spinner アイコンのサイズ指定に使用する width
• カスタム HTML アニメーションに使用する template
• グローバルなデフォルト設定に使用する setSpinner
• CSS による Spinner の色の上書き
• CSS によるラベルの配置
• オーバーレイの背景のカスタマイズ
• テーマ別の type マッピング
• レスポンシブな Spinner のパターン

アクセシビリティ

📄 参照： references/spinner-accessibility.md

• 読み込み領域での aria-busy
• スクリーンリーダーによる通知用の aria-live 領域
• ハイコントラストディスプレイ用の type: 'HighContrast'
• キーボードアクセシビリティ（トリガーへのフォーカス、フォーカスの復帰）
• フォーカス管理のパターン
• アクセシブルな Spinner の完全なパターン
• WCAG 2.1 準拠チェックリスト

クイックスタート

最小構成の Spinner（関数コンポーネント）

🛑 停止 — 開発サーバーを自律的に起動しないでください。セットアップ後にユーザーに npm run dev を実行するよう依頼してください。

import { createSpinner, showSpinner } from '@syncfusion/ej2-react-popups';
import * as React from 'react';
import { useEffect } from 'react';
import './App.css';

function App() {
  useEffect(() => {
    createSpinner({
      target: document.getElementById('container') as HTMLElement
    });
    showSpinner(document.getElementById('container') as HTMLElement);
  }, []);

  return (
    <div id="container" style={{ height: '200px' }} />
  );
}

export default App;

表示／非表示を切り替える Spinner

import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-react-popups';
import { useEffect, useRef, useState } from 'react';

function DataLoader() {
  const ref = useRef<HTMLDivElement>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (ref.current) {
      createSpinner({ target: ref.current, label: 'Loading...' });
    }
  }, []);

  const load = async () => {
    setLoading(true);
    showSpinner(ref.current as HTMLElement);
    try {
      await fetchData();
    } finally {
      hideSpinner(ref.current as HTMLElement);
      setLoading(false);
    }
  };

  return (
    <div>
      <button onClick={load} disabled={loading}>Load Data</button>
      <div ref={ref} style={{ height: '200px', position: 'relative' }} />
    </div>
  );
}

グローバル Spinner のタイプ

import { setSpinner } from '@syncfusion/ej2-react-popups';

// Call BEFORE any createSpinner — sets global default type
setSpinner({ type: 'Bootstrap5' });

よくあるパターン

パターン 1：クリーンアップを伴う非同期データ取得

const fetchWithSpinner = async (container: HTMLElement) => {
  showSpinner(container);
  try {
    const data = await fetch('/api/data').then(r => r.json());
    return data;
  } finally {
    hideSpinner(container); // Always hide, even on error
  }
};

パターン 2：React の状態との同期

useEffect(() => {
  if (!ref.current) return;
  if (isLoading) {
    showSpinner(ref.current);
  } else {
    hideSpinner(ref.current);
  }
}, [isLoading]);

パターン 3：全ページの読み込み

useEffect(() => {
  createSpinner({ target: document.body, label: 'Initializing...' });
  showSpinner(document.body);

  initializeApp().finally(() => hideSpinner(document.body));
}, []);

パターン 4：カスタムタイプの Spinner

createSpinner({
  target: el,
  type: 'Fluent2',
  width: '40px',
  label: 'Processing...',
  cssClass: 'my-overlay'
});

主な API クイックリファレンス

関数	シグネチャ	目的
createSpinner	(args: SpinnerArgs) => void	DOM 要素にスピナーを初期化します
showSpinner	(el: HTMLElement) => void	既存のスピナーを表示します
hideSpinner	(el: HTMLElement) => void	表示中のスピナーを非表示にします
setSpinner	(args: SetSpinnerArgs) => void	すべてのスピナーのグローバルなデフォルト値を設定します

SpinnerArgs のプロパティ： target（必須）、width、label、cssClass、template、type

SpinnerType の値： 'Material' | 'Material3' | 'Fabric' | 'Bootstrap' | 'Bootstrap4' | 'Bootstrap5' | 'HighContrast' | 'Tailwind' | 'Tailwind3' | 'Fluent' | 'Fluent2'

重要なルール

• ❌ SpinnerComponent クラスはありません — import { SpinnerComponent } は存在しません
• ✅ 使用できるのは次のものだけです： createSpinner、showSpinner、hideSpinner、setSpinner
• ❌ SpinnerArgs として color、size、visible、isLoading を使用しないでください — これらは存在しません
• ✅ 有効な SpinnerArgs： target、width、label、cssClass、template、type
• ⚠️ showSpinner の前に createSpinner を呼び出してください — 順序が重要です
• ⚠️ スピナーのロジックは useEffect に配置してください — createSpinner を呼び出す前に DOM 要素が存在している必要があります
• ✅ 必ず finally で hideSpinner を呼び出してください — ローディング状態が解除されない問題を防ぎます

トラブルシューティング

問題	解決策
スピナーが表示されない	showSpinner の前に createSpinner が呼び出されていることを確認します。DOM 要素が存在することも確認してください
スピナーが表示されたままになる	finally ブロックで hideSpinner を呼び出します。未処理の Promise の拒否がないか確認してください
アニメーションしない	ej2-base と ej2-react-popups の両方の CSS がインポートされていることを確認します。ej2-base を先に指定する必要があります
TypeScript エラー	document.getElementById('id') as HTMLElement のようにキャストするか、useRef<HTMLDivElement> を使用します
スピナーが要素の範囲外に表示される	対象要素に position: relative を追加します
テーマが違う	アプリの CSS テーマに合わせて type を設定します（例：Fluent 2 の CSS には 'Fluent2'）

関連コンポーネント

• プログレスバー — パーセンテージで進捗を示す場合に使用します
• スケルトン — コンテンツのプレースホルダーやシマーによるローディングパターンに使用します
• トースト — 操作を妨げないローディング通知に使用します
• ダイアログ — ユーザーの確認が必要なモーダル形式のローディング状態に使用します

リソース

• 公式ドキュメント： https://ej2.syncfusion.com/react/documentation/spinner/
• はじめに： https://ej2.syncfusion.com/react/documentation/spinner/getting-started
• npm パッケージ： @syncfusion/ej2-react-popups

バッジ

Syncfusion React Badge は純粋な CSS コンポーネントであり、インポートする React コンポーネントクラスはありません。対象の UI 要素内にネストされた <span>（または <a>）要素に CSS 修飾クラスを追加して、バッジを適用します。

パッケージ： @syncfusion/ej2-react-notifications

🛑 エージェントによる使用： 複数の手順を自律的に実行しないでください。各アクション（インストール、実行、ファイル作成）の前にユーザーへ確認してください。

主な機能

• 8 種類のカラー： プライマリ、セカンダリ、成功、危険、警告、情報、ライト、ダーク
• 形状の種類： 円形、ピル、リンク、通知、ドット、重ね合わせ
• 配置： 親要素の上部（デフォルト）および下部に配置できます
• カスタマイズ： CSS による色、サイズ、任意の位置のカスタマイズ
• ListView との連携： リスト項目に動的コンテンツを含むバッジを埋め込めます

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• パッケージのインストール：🛑 停止 — パッケージを自律的にインストールしないでください。ユーザーに npm install @syncfusion/[email protected] --save の実行を依頼してください。npm audit で確認してください
• React コンポーネントに最初のバッジを追加する
• 最小限の動作例
• アプリケーションの実行

バッジの種類と形状

📄 参照： references/types-and-shapes.md

• あらかじめ定義された8種類のカラーと、それぞれの意味
• 円形、ピル、リンク、通知、ドット、重ね合わせの形状タイプ
• バッジの位置（上部または下部）
• 修飾クラスを組み合わせる場合（例：overlap + notification + circle）

カスタマイズ

📄 参照： references/customization.md

• CSS クラスを使ったカスタムカラーの上書き
• font-size によるバッジサイズの調整
• CSS による上書きで位置（左上、左下）をカスタマイズ
• カスタム CSS と組み込みの修飾クラスの使い分け

ハウツーガイド

📄 参照： references/how-to.md

• バッジを ListView コンポーネントに統合する
• バッジの内容を動的に更新する（カウントを増やす）
• DOM の更新を使ったバッジの状態管理に関する React のパターン

クイックスタート

1. パッケージをインストールします：

npm install @syncfusion/[email protected] --save
npm audit

2. CSS を src/App.css に追加します：

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";

3. コンポーネントにバッジを追加します：

import * as React from 'react';
import './App.css';

function App() {
  return (
    <h1>Badge Component <span className="e-badge e-badge-primary">New</span></h1>
  );
}
export default App;

よくあるパターン

アイコン上の通知バッジ

// Parent must have position: relative
<div className="badge-block">
  <div className="skype svg_icons"></div>
  <span className="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
</div>

ドット状のステータスインジケーター（下部）

<div className="badge-block">
  <div className="firefox svg_icons"></div>
  <span className="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"></span>
</div>

ピル形状のラベル

<h1>Messages <span className="e-badge e-badge-primary e-badge-pill">New</span></h1>

CSS クラスリファレンス

クラス	用途
e-badge	すべてのバッジに必要な基本クラス
e-badge-primary / e-badge-{color}	カラーバリエーション
e-badge-pill	ピル（角丸長方形）形状
e-badge-circle	円形
e-badge-notification	通知カウンターバッジ
e-badge-dot	最小限のドットバッジ（テキストなし）
e-badge-overlap	親要素の端に重ねて配置
e-badge-bottom	バッジを上部ではなく下部に配置