# 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 install -g create-react-app
    create-react-app quick-start
    cd quick-start
    npm start
    ```

    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, refer to [https://reactjs.org/docs/create-a-new-react-app.html](https://reactjs.org/docs/create-a-new-react-app.html)
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. **Import SpreadJS CSS into index.js file**
    Import the SpreadJS CSS in your **index.js** file using the following code:

    ```TypeScript
    import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
    ```
4. <strong>Install</strong> **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
    ```
5. **Use spread-sheets-io in React Application**
    Modify the **App.js** 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:
<br>
    This example shows how to use the spread-sheets-io elements in a React application.

    ```TypeScript
    import React, { Component } from 'react';
    import { SpreadSheets, Worksheet, Column } from '@mescius/spread-sheets-react';
    import * as GC from "@mescius/spread-sheets";
    import saveAs from "file-saver";
    import "@mescius/spread-sheets-io";
    
    class APP extends Component {
      constructor(props) {
        super(props);
        this.spreadBackColor = 'aliceblue';
        this.sheetName = 'Goods List';
        this.hostStyle =
        {
          width: '800px',
          height: '600px'
        };
    
      }
    
      workbookInit = (spread) => {
        this.spread = spread
    
        document.getElementById('selectedFile').addEventListener("change", e => this.loadFile(e.target.files[0]));
        document.getElementById('exportBtn').addEventListener("click", this.exportFile);
    
      }
    
      fileTypeMap = { sjs: "sjs", xlsx: "xlsx", ssjson: "ssjson" };
      getFileType = (fileName) => {
        return fileName.split(".").pop();
      }
    
        // Load Files
      loadFile = (file) => {
        console.log("hi")
        const type = this.getFileType(file.name);
        const fileType = type === "xlsx" ? GC.Spread.Sheets.FileType.excel : GC.Spread.Sheets.FileType.ssjson;
    
        if (type === this.fileTypeMap.sjs) {
          this.open(file, () => console.log("SJS File Loaded"), console.error);
        } else if ([this.fileTypeMap.xlsx, this.fileTypeMap.ssjson].includes(type)) {
          this.spread.import(file, () => console.log("File Loaded"), console.error, { fileType });
        } else {
          console.error("Unsupported file type");
        }
      }
    
      // Export Files
      exportFile = () => {
        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 === this.fileTypeMap.sjs) {
          this.spread.save(blob => saveAs(blob, fileName), console.error);
        } else if (type === this.fileTypeMap.xlsx || type === this.fileTypeMap.ssjson) {
          this.spread.export(blob => saveAs(blob, fileName), console.error, { fileType });
        }
      }
    
      render() {
        return (
          <div>
    
            <input id="selectedFile" type="file" accept=".sjs, .xlsx, .ssjson" />
    
            <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 id="exportBtn">Export</button>
    
            <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>
              <Worksheet name={this.sheetName} dataSource={this.data}>
                <Column dataField='Name' width={300}></Column>
                <Column dataField='Category' width={this.columnWidth}></Column>
                <Column dataField='Price' width={this.columnWidth}
                  formatter="$#.00"></Column>
                <Column dataField='Shopping Place' width={this.columnWidth}></Column>
              </Worksheet>
            </SpreadSheets>
          </div>
        )
      }
    }
    export default APP    
    ```