React

SpreadJSはReactをサポートしており、開発者はReactアプリケーション内で強力なスプレッドシートインターフェースを構築できます。このガイドでは、ViteベースのReactアプリケーションで関数コンポーネントとフックを使ってSpreadJSを統合する方法を説明します。

Reactのアプリケーションの作成方法については、以下のドキュメントをご参照ください。

メモ：SpreadJSは、Reactバージョン16、17、18、19をサポートしています。

Viteによるプロジェクトセットアップ

1. ViteでReactプロジェクトを作成する

フレームワークとバリアントに「React」と「TypeScript」を選択します。

npm create vite@latest spreadjs-vite-app
cd spreadjs-vite-app
npm install

2. SpreadJSのReactモジュールをインストールする

npm install @mescius/spread-sheets
npm install @mescius/spread-sheets-react
npm install @mescius/spread-sheets-resources-ja

基本セットアップ

1. SpreadJS CSSのインポート

src/App.tsxファイルで、以下のコードを使用してSpreadJS CSSをインポートします。

import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

2. ReactアプリケーションでSpreadJSを使用し、ライセンスを設定

src/App.tsxファイルを必要に応じて変更します。変更内容はブラウザウィンドウをリフレッシュすると反映されます。コンポーネントを初期化する前に有効なSpreadJSライセンスキーを入力できます。以下のサンプルコードを例として使用できます：

import { useState } from 'react';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import * as GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-resources-ja';
import './App.css'
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
GC.Spread.Common.CultureManager.culture('ja-jp');

//有効なライセンスキーを入力してください。
// GC.Spread.Sheets.LicensKey = 'YOUR_LICENSE_KEY'; 

function App() {
  let spread: GC.Spread.Sheets.Workbook;
  const [spreadBackColor, setSpreadBackColor] = useState('aliceblue');
  const [sheetName, setSheetName] = useState('My Sheet');
  const [hostStyle, setHostStyle] = useState({
    width: '800px',
    height: '600px'
  });

  const initSpread = function (spreadObj: GC.Spread.Sheets.Workbook) {
    spread = spreadObj;
    const sheet = spread.getActiveSheet();
    sheet.setValue(0, 0, "こんにちは、SpreadJS");
  }
  return (
    <>
      <div className="sample-spreadsheets">
        <SpreadSheets backColor={spreadBackColor} hostStyle={hostStyle} workbookInitialized={spread => initSpread(spread)}>
          <Worksheet name={sheetName}></Worksheet>
        </SpreadSheets>
      </div>
    </>
  )
}

export default App

3. プロジェクトを実行

npm run dev

SpreadSheets、Worksheet、およびColumnは、タグ階層での基本要素です。他の要素は、それぞれ設定して使用します。主なタグ階層は次のとおりです。

<SpreadSheets>
  <Worksheet>
    <Column></Column>
    ...
  </Worksheet>
  ...
</SpreadSheets>

以下の各トピックでは、さまざまな要素（ディレクティブ）について説明します。