# Shape Element

A walkthrough showing how to add shape functionality to SpreadJS in a React web application

## Content

Using the Shape element in SpreadJS with React, you can quickly embed and render various shapes including geometric figures like squares, circles, rectangles, triangles, pentagons, hexagons, octagons, etc. in the worksheets without any hassle.

1. **Create a React Project**
    Open the Command Prompt window and type the following commands:

    ```Shell
    npm create vite@latest quick-start -- --template react
    cd quick-start
    npm install
    npm run dev
    ```

    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 using Vite, refer to [https://vite.dev/guide/](https://vite.dev/guide/).
2. **Install SpreadJS React module in project**
    Next, you need to install @mescius/spread-sheets-react in your project using the following command:

    ```Shell
    npm install @mescius/spread-sheets-react
    ```
3. **Install Shapes React Module in the Project**
    Next, you need to install the shapes module in your project using the following command:

    ```Shell
    npm install @mescius/spread-sheets-shapes
    ```
4. **Use Shapes in React Application**
    Now, you can modify the App.jsx 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.

    ```auto
    import React, { useCallback } from "react";
    import "./App.css";
    import * as GC from "@mescius/spread-sheets";
    import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
    import { SpreadSheets, Worksheet } from "@mescius/spread-sheets-react";
    
    // Import Shapes module
    import "@mescius/spread-sheets-shapes";
    
    var SpreadJSKey = "xxx";
    GC.Spread.Sheets.LicenseKey = SpreadJSKey;
    
    const hostStyle = {
      width: "1100px",
      height: "800px",
    };
    
    function App() {
      // Handling workbook initialized event
      const workbookInit = useCallback((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();
      }, []);
    
      return (
        <div>
          <SpreadSheets
            hostStyle={hostStyle}
            workbookInitialized={workbookInit}
          >
            <Worksheet></Worksheet>
          </SpreadSheets>
        </div>
      );
    }
    
    export default App;
    ```