SpreadJS with Create React App

SpreadJS supports using individual module and plugin together in create react app development environment.

Using Module and Plugin together

This involves the following steps:

1. Create a Create React App Project

   Open the Command Prompt window and type the following commands:

   npx create-react-app my-app
   cd my-app 
   npm start

   After you finish, the create react app project will be created at the specified location in the directory. For more information on how to create a create react app project, refer to Create React App.

2. Install SpreadJS modules and plugins in the project

   Install the SpreadJS NPM modules and plugins using the following commands:

   npm run eject
   npm install @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print @mescius/spread-sheets-react

3. Use SpreadJS in Create React App application

   Modify the App.js file using the following code.

   Changes will be reflected when the browser window is refreshed.

   import "@mescius/spread-common";
   import "@mescius/spread-calc-engine";
   import "@mescius/spread-sheets-core";
   import "@mescius/spread-sheets-calc-engine";
   import "@mescius/spread-sheets-print";
   import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
   import './App.css';
   import '../node_modules/@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css';
   function App() {
       let initSpread = function (value) {
           let spread = window.spread = value;
           let sheet = spread.getActiveSheet();
           sheet.setValue(0, 0, "Hello SpreadJS");
       }
       let printSpread = function () {
           let spread = window.spread;
           spread.print();
       }
       return (<div className="sample-tutorial">
           <div className="sample-spreadsheets">
               <SpreadSheets workbookInitialized={spread => initSpread(spread)}>
                   <Worksheet></Worksheet>
               </SpreadSheets>
           </div>
           <div id="testButton" onClick={() => printSpread()}>Print</div>
       </div>);
   }
   export default App;

   Modify the App.css using the following code:

   .sample-tutorial {
       position: relative;
       height: 400px;
       overflow: hidden;
   } 
   .sample-spreadsheets {
       width: 100%;
       height: 300px;
   }
   body {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
   } 
   #testButton {
       margin-top: 10px;
       text-align: center;
       width: 100px;
       height: 30px; 
       border: 1px solid gray; 
       background-color: lightblue;
   }

   In web.config.js, search alias, and add one alias as mentioned below:

   .....
   alias:{
      "@mescius/spread-sheets": require.resolve("@mescius/spread-common"),
      .......
   }
   .....