SpreadJS 14
SpreadJS Designer Components / JavaScript Frameworks / React
In This Topic
    React
    In This Topic

    You can perform the following steps to add SpreadJS Designer in the React application:

    1. Add the following required packages in the package.json file.
      JavaScript
      Copy Code
      @grapecity/spread-excelio
      @grapecity/spread-sheets
      @grapecity/spread-sheets-barcode
      @grapecity/spread-sheets-charts
      @grapecity/spread-sheets-languagepackages
      @grapecity/spread-sheets-pdf
      @grapecity/spread-sheets-print
      @grapecity/spread-sheets-resources-ja
      @grapecity/spread-sheets-shapes
      @grapecity/spread-sheets-pivot-addon
      @grapecity/spread-sheets-designer
      @grapecity/spread-sheets-designer-resources-en
      @grapecity/spread-sheets-react
      @grapecity/spread-sheets-designer-react
      

    2. Now, you can import the required modules using the following code snippet.
      JavaScript
      Copy Code
      import '@grapecity/spread-sheets-designer-resources-en';
      import {Designer} from '@grapecity/spread-sheets-designer-react';
      import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css"
      import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
      

    3. In order to render designer component, you can use the following code snippet.
      JavaScript
      Copy Code
      function App() {
        return (
          <Designer styleInfo = {{width: "1500px", height: '90vh'}}></Designer>
        );
      }
      

    Access SpreadJS instance

    You can also access the SpreadJS instance by using designerInitialized event. Follow steps 1 and 2 as listed above and continue:

    1. In order to render the designer component and accessing SpreadJS instance, you can use the following code snippet.
      JavaScript
      Copy Code
      function App() {
          return (
           <Designer designerInitialized={designer => { getDesigner(designer) }}
           styleInfo={{ width: "100%", height: '98vh' }}></Designer >
          );
      }
      
      // Function to get designer
      function getDesigner(designer) {
          //this is hosted spread instance 
          var workbook = designer.getWorkbook();
          var sheet = workbook.getActiveSheet(); sheet.setValue(1, 1, 'Test');
      }
      

    Apply License

    The licensed version allows you to use all features of SpreadJS designer components. You need to set the license key for SpreadJS, ExcelIO, and the Designer component which can be done by using the following code snippet.

    JavaScript
    Copy Code
    import React from 'react';
    import '@grapecity/spread-sheets-designer-resources-en';
    import * as GC from '@grapecity/spread-sheets';
    import '@grapecity/spread-sheets-designer';
    import {Designer} from '@grapecity/spread-sheets-designer-react';
    import * as ExcelIO from "@grapecity/spread-excelio";
     
    var sjsLicense = "sjs-distribution-key";
    GC.Spread.Sheets.LicenseKey = sjsLicense;
    ExcelIO.LicenseKey = sjsLicense;
     
    GC.Spread.Sheets.Designer.LicenseKey = " designer-component-distribution-key ";