# Spread-sheets-io Element

A walkthrough showing how to add Spread IO functionality to SpreadJS in a React web application

## Content

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.

1. **Create a React Project**
    Open the **Command Prompt** window and type the following commands:

    ```Shell
    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/](https://vite.dev/guide/)
2. **Install SpreadJS React modules in project**
    Install SpreadJS React modules in your project using the following command:

    ```Shell
    npm install @mescius/spread-sheets
    npm install @mescius/spread-sheets-react
    ```
3. **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:

    ```Shell
    npm install @mescius/spread-sheets-io
    npm install file-saver --save
    ```
4. **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.

    ```auto
    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;
    ```