syncfusion-react-common

Syncfusion React コンポーネントの共通機能

Syncfusion React コンポーネントには、ユーザーエクスペリエンスを向上させ、異文化への対応を確保し、すべてのコンポーネントに基盤となる機能を提供する、包括的な共通ユーティリティと機能が含まれています。このスキルでは、堅牢な React アプリケーションを構築するためのインストール設定、アニメーション、グローバル化、状態管理、セキュリティに関する考慮事項を扱います。

目次

• ナビゲーションガイド
• クイックスタート
• 共通機能

ナビゲーションガイド

使用開始とフレームワークの設定

📄 参照: references/getting-started.md

• フレームワークの統合（Next.js、Remix、Vite、Preact、SharePoint）
• パッケージのインストールと CSS のインポート
• コンポーネントの初期化
• クイックスタートの例

グローバル化

📄 参照: references/globalization.md

• アラビア語、ヘブライ語、ペルシア語に対応した右から左（RTL）へのサポート
• 多言語サポートのためのローカライズ（l10n）
• CLDR データを使用した国際化（i18n）
• 数値と通貨の書式設定
• 日付と時刻の書式設定

高度な機能とユーティリティ

📄 参照: references/advanced-features.md

• アニメーション効果（FadeIn、ZoomOut、SlideUp など）
• アニメーションのタイミング（期間、遅延、グローバル設定）
• ドラッグ＆ドロップ操作（Draggable、Droppable）
• テンプレートのカスタマイズと最適化
• enablePersistence による状態の永続化
• セキュリティのベストプラクティスと HTML のサニタイズ

クイックスタート

Syncfusion React コンポーネントパッケージとテーマパッケージをインストールする

npm install @syncfusion/ej2-react-grids@latest @syncfusion/ej2-tailwind3-theme@latest --save

注: @syncfusion/ej2-base パッケージはすべての Syncfusion コンポーネントの依存関係であり、Syncfusion React パッケージをインストールすると自動的にインストールされます。package.json ファイルに明示的に追加する必要はありません。

スタイルをインポートする

@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/grid/index.css";

ライセンスキーを登録する

手順 1: 環境変数を設定します。

# Windows
setx SYNCFUSION_LICENSE "Your_License_Key_Here"

# Mac/Linux
export SYNCFUSION_LICENSE='Your_License_Key_Here'

手順 2: NPX コマンドを使用してライセンスを有効化します。

npx syncfusion-license activate

注: ほかのライセンス登録方法については、Syncfusion ライセンスキー登録のドキュメントを参照してください。

基本的なコンポーネントの設定

import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Page } from '@syncfusion/ej2-react-grids';

function App() {
  const data = [
    { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38 },
    { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61 }
  ];

  return (
    <GridComponent dataSource={data} allowPaging={true}>
      <ColumnsDirective>
        <ColumnDirective field='OrderID' width='100' />
        <ColumnDirective field='CustomerID' width='100' />
        <ColumnDirective field='Freight' width='100' format="C2" />
      </ColumnsDirective>
      <Inject services={[Page]} />
    </GridComponent>
  );
}

export default App;

共通機能

状態の永続化を有効にする

<GridComponent dataSource={data} enablePersistence={true}>
  {/* Component content */}
</GridComponent>

RTL サポートを有効にする

import { enableRtl } from '@syncfusion/ej2-base';

// Global RTL enablement
enableRtl(true);

// OR per-component
<ListViewComponent enableRtl={true} />

アニメーション効果を追加する

import { Animation } from '@syncfusion/ej2-base';

useEffect(() => {
  const animation = new Animation({ duration: 5000, delay: 2000 });
  animation.animate(element, { name: 'FadeOut' });
}, []);

ドラッグ＆ドロップを実装する

import { Draggable, Droppable } from '@syncfusion/ej2-base';

useEffect(() => {
  const draggable = new Draggable(document.getElementById('draggable'), { clone: false });
  const droppable = new Droppable(document.getElementById('droppable'), {
    drop: (e) => {
      e.droppedElement.textContent = 'Dropped!';
    }
  });
}, []);