Using the Shape Element

Using the Shape element in SpreadJS with React, you can quickly embed and render various shapes including geometric figures like square, circle, rectangle, triangle, pentagon, hexagon, octagon etc. in the worksheets without any hassle.

Create a React Project

Open the Command Prompt window and type the following commands:

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/add-react-to-a-new-app.html.

Install SpreadJS React module in project
Next, you need to install @grapecity/spread-sheets-react in your project using the following command:

npm install @grapecity/spread-sheets-react
Import SpreadJS CSS into index.js file
Next, you need to import the SpreadJS CSS in your index.js file using the following code:

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
Install Shapes React Module in the Project
Next, you need to install the shapes module in your project using the following command:

npm install @grapecity/spread-sheets-shapes

Use Shapes in React Application

Now, you can 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:

This example shows how to use shapes in a React Application.

JavaScript	Copy Code
import React from 'react'; import './App.css'; import GC from '@grapecity/spread-sheets'; import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react'; // Import Shapes module import '@grapecity/spread-sheets-shapes'; var SpreadJSKey = "xxx"; GC.Spread.Sheets.LicenseKey = SpreadJSKey; class App extends React.Component { constructor(props) { super(props); this.hostStyle = { width: '1100px', height: '800px' }; } // Handling workbook initialized event workbookInit = (spread) => { this.setState({ spread: spread }); // Fetching sheet let sheetShape = spread.getSheet(0); // Setting Sheetname sheetShape.name("Shapes"); sheetShape.suspendPaint(); // Add built-in shape "donut" var donutShape = sheetShape.shapes.add('autoShape', GC.Spread.Sheets.Shapes.AutoShapeType.donut, 50, 50, 150, 150); // Adding text to built-in shape "donut" donutShape.text("Donut Shape"); // Adding style to built-in shape "donut" var shapeStyle = donutShape.style(); shapeStyle.textEffect.color = "Red"; shapeStyle.textEffect.font = "18px Arial"; shapeStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center; shapeStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center; donutShape.style(shapeStyle); sheetShape.resumePaint(); } render() { return ( <div> <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}> <Worksheet> </Worksheet> </SpreadSheets> </div> ) } } export default App;

JavaScript

Copy Code

import React from 'react';
import './App.css';
import GC from '@grapecity/spread-sheets';
import { SpreadSheets, Worksheet } from '@grapecity/spread-sheets-react';

// Import Shapes module
import '@grapecity/spread-sheets-shapes';

var SpreadJSKey = "xxx";
GC.Spread.Sheets.LicenseKey = SpreadJSKey;

class App extends React.Component

{
constructor(props)

{
        super(props);
        this.hostStyle =
{
                width: '1100px',
                height: '800px'
};
}

// Handling workbook initialized event
workbookInit = (spread) =>

{
this.setState({
spread: spread
});

// Fetching sheet
let sheetShape = spread.getSheet(0);

// Setting Sheetname
sheetShape.name("Shapes");
sheetShape.suspendPaint();

// Add built-in shape "donut"
var donutShape = sheetShape.shapes.add('autoShape', GC.Spread.Sheets.Shapes.AutoShapeType.donut, 50, 50, 150, 150);

// Adding text to built-in shape "donut"
donutShape.text("Donut Shape");

// Adding style to built-in shape "donut"
var shapeStyle = donutShape.style();
shapeStyle.textEffect.color = "Red";
shapeStyle.textEffect.font = "18px Arial";
shapeStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
shapeStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center;
donutShape.style(shapeStyle);

sheetShape.resumePaint();

}
render()

{
return (
<div>
<SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle} workbookInitialized={this.workbookInit}>
<Worksheet>
</Worksheet>
</SpreadSheets>
</div>
)
}
}

export default App;