# React

## Content

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

1. Create a React project by typing the following commands in Command Prompt.

    ```Shell
    npm install -g create-react-app
    create-react-app designercomponent
    cd designercomponent
    npm start
    ```
2. Install the following SpreadJS React modules to use SpreadJS Designer Component.

    ```Shell
    npm install @grapecity/spread-excelio
    npm install @grapecity/spread-sheets
    npm install @grapecity/spread-sheets-barcode
    npm install @grapecity/spread-sheets-charts
    npm install @grapecity/spread-sheets-languagepackages
    npm install @grapecity/spread-sheets-pdf
    npm install @grapecity/spread-sheets-print
    npm install @grapecity/spread-sheets-shapes
    npm install @grapecity/spread-sheets-tablesheet
    npm install @grapecity/spread-sheets-pivot-addon
    npm install @grapecity/spread-sheets-designer
    npm install @grapecity/spread-sheets-designer-resources-en
    npm install @grapecity/spread-sheets-react
    npm install @grapecity/spread-sheets-designer-react
    ```
3. Import the required modules using the following code snippet in App.js.

    ```JavaScript
    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'
    ```
4. Render the Designer Component using the following code snippet in App.js.

    ```JavaScript
    function App() {
       return (
          <Designer styleInfo = {{width: "1500px", height: '90vh'}}></Designer>
       );
    }
    export default App;
    ```
5. Run the application.

    ```Shell
    npm start
    ```

## Access SpreadJS instance

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

1. To render the Designer Component and access the SpreadJS instance, you can use the following code snippet.

    ```JavaScript
    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 the SpreadJS Designer Component. 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
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 ";
```