How to use SpreadJS with React framework

March 29 2018

One of the best features of SpreadJS is the ability to utilize it with different frameworks. This tutorial demonstrates how to quickly combine SpreadJS with React using the Babel JavaScript compiler in a simple web page.

Get the SpreadJS React sample

Step 1: Set up the HTML5 page

First, we need to add references to React to the page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>SpreadJS React Demo</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
</html>

In this page, we'll be using the precompiled version of Babel—called babel-standalone—so we'll add a reference to that, as well:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Finally, add a reference to Spread.Sheets:

<script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.11.0.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.11.0.0.css">

Before we write any script, we need to define a DIV element to contain the Spread instance. Let's call it root.

<div id="root"></div>

Step 2: Create a React class for Spread.Sheets

Next, add a Babel script element to the page. We'll put all our code here:

<script type="text/babel">
</script>

Then, define a React component for Spread.Sheets, so we can define a class that extends React.Component:

class ReactSpreadJS extends React.Component{
}

The class needs to have the componentDidMount and render functions defined inside it. The componentDidMount function is invoked immediately after a component is mounted, so we use this to initialize the Spread instance:

componentDidMount() {
    //In the DidMount life cycle, we initialize Spread Sheet instance, and the host is defined in the Component template.
    let spread = new GC.Spread.Sheets.Workbook(this.refs.spreadJs, {sheetCount: 3});

    if(this.props.workbookInitialized){
        this.props.workbookInitialized(spread);
    }
}

Next, define the Spread.Sheets DOM element in the render function:

render() {
    //Define the Spread.Sheets DOM template
    return(
        <div ref="spreadJs"  style={{width:'100%',height:'100%'}}>
        </div>);
}

Step 3: Create an app class for the component

First, define the application React component via an App class:

//Define the application react component.
class App extends React.Component{
}

Next, add a render function in which you'll call the ReactSpreadJS component:

render(){
    //In the root component, it include one ReactSpreadJS component.
    return(
            <div style={{width:'800px',height:'600px'}}>
                <ReactSpreadJS workbookInitialized = {(spread)=>{console.log(spread)}}>

                </ReactSpreadJS>
            </div>
    )
}

To finish the script, tell React to initialize the application by using ReactDOM.render:

ReactDOM.render(
    //Main entry, initialize application react component.
        <App/>,
    document.getElementById('root')
);

That's all you need to do to add Spread.Sheets to an HTML page with React. This is only a basic utilization of React and Spread.Sheets, but it can be easily expanded upon.

Get the SpreadJS React sample

Try SpreadJS today

Kevin Ashley

Product Manager