Spread-sheets-io Element

Using the spread-sheets-io element in SpreadJS with React, you can quickly render and display the Excel sheets on the webpages while executing the import and export operations without any hassle.

Create a React Project
Open the Command Prompt window and type the following commands:
```
npm create vite@latest quick-start -- --template react
cd quick-start
npm install
npm run dev
```
After you finish, the react project will be created at the specified location in the directory. For more information on how to create a React project with Vite, refer to https://vite.dev/guide/
Install SpreadJS React modules in project
Install SpreadJS React modules in your project using the following command:
```
npm install @mescius/spread-sheets
npm install @mescius/spread-sheets-react
```
Install spread-sheets-io React Module and FileSaver React Module in the Project
Install the spread-sheets-io and file-saver modules in your project using the following commands:
```
npm install @mescius/spread-sheets-io
npm install file-saver --save
```

Use spread-sheets-io in React Application

Modify the App.jsx file as per your requirements. Changes will be reflected when the browser window is refreshed. As an example, you can use the sample code given below:

This example shows how to use the spread-sheets-io elements in a React application.

import React, { useRef, useCallback } from 'react';
import * as GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-io";
import { SpreadSheets, Worksheet, Column } from '@mescius/spread-sheets-react';
import saveAs from "file-saver";

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

const spreadBackColor = 'aliceblue';
const sheetName = 'Goods List';
const hostStyle = {
  width: '800px',
  height: '600px'
};

const fileTypeMap = { sjs: "sjs", xlsx: "xlsx", ssjson: "ssjson" };

const getFileType = (fileName) => {
  return fileName.split(".").pop();
};

function App() {
  const spreadRef = useRef(null);

  const workbookInit = useCallback((spread) => {
    spreadRef.current = spread;
  }, []);

  // Load Files
  const loadFile = useCallback((file) => {
    const spread = spreadRef.current;
    if (!spread) return;

    const type = getFileType(file.name);
    const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;

    if (type === fileTypeMap.sjs) {
      spread.open(file, () => console.log("SJS File Loaded"), console.error);
    } else if ([fileTypeMap.xlsx, fileTypeMap.ssjson].includes(type)) {
      spread.import(file, () => console.log("File Loaded"), console.error, { fileType });
    } else {
      console.error("Unsupported file type");
    }
  }, []);

  // Export Files
  const exportFile = useCallback(() => {
    const spread = spreadRef.current;
    if (!spread) return;

    const type = document.getElementById('exportFileType').value;
    const fileName = `export.${type}`;
    const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;

    if (type === fileTypeMap.sjs) {
      spread.save(blob => saveAs(blob, fileName), console.error);
    } else if (type === fileTypeMap.xlsx || type === fileTypeMap.ssjson) {
      spread.export(blob => saveAs(blob, fileName), console.error, { fileType });
    }
  }, []);

  const handleFileChange = useCallback((e) => {
    if (e.target.files[0]) {
      loadFile(e.target.files[0]);
    }
  }, [loadFile]);

  return (
    <div>

      <input type="file" accept=".sjs, .xlsx, .ssjson" onChange={handleFileChange} />

      <label htmlFor="exportFileType">File Type:</label>
      <select id="exportFileType">
        <option value="xlsx">Excel</option>
        <option value="ssjson">SSJson</option>
        <option value="sjs">SJS</option>
      </select>
      <button onClick={exportFile}>Export</button>

      <SpreadSheets backColor={spreadBackColor} hostStyle={hostStyle} workbookInitialized={workbookInit}>
        <Worksheet name={sheetName}>
          <Column dataField='Name' width={300}></Column>
          <Column dataField='Category'></Column>
          <Column dataField='Price'
            formatter="$#.00"></Column>
          <Column dataField='Shopping Place'></Column>
        </Worksheet>
      </SpreadSheets>
    </div>
  );
}
export default App;