Getting Started with Syncfusion® React Components in a Gatsby Project

20 Aug 20254 minutes to read

This guide provides a step-by-step workflow for creating a Gatsby application and integrating Syncfusion® React UI components.

Gatsby is an open-source React-based framework for building high-performance, modern web applications and static websites. It includes out-of-the-box optimizations and integrates React, GraphQL, and the modern JavaScript ecosystem.

Prerequisites

System requirements for Syncfusion® React UI components

Set up the Gatsby project

To create a new Gatsby project, use one of the commands that are specific to either NPM or Yarn.

npm create gatsby

or

yarn create gatsby

Using one of the above commands will lead you to set up additional configurations for the project, as below:

Define the project name: We can specify the name of the project directly. Let’s specify the name of the project as my-project for this article.

What would you like to call your site?
√ · my-project
What would you like to name the folder where your site will be created?
√ / my-project
√ Will you be using JavaScript or TypeScript?       
· TypeScript
√ Will you be using a CMS?
· No (or I'll add it later)
√ Would you like to install a styling system?
· No (or I'll add it later)
√ Would you like to install additional features with other plugins?No items were selected


Thanks! Here's what we'll now do:

    Create a new Gatsby site in the folder my-project

? Shall we do this? (Y/n) » Yes

Upon completing the aforementioned steps to create my-project, run the following command to jump into the project directory:

cd my-project

Now that my-project is ready to run with default settings, let’s add Syncfusion® components to the project.

Install Syncfusion® React packages

Syncfusion® React component packages are available at npmjs.com. Install the required component package using:

npm install @syncfusion/ej2-react-grids --save

or

yarn add @syncfusion/ej2-react-grids

This guide uses the React Grid component as an example.

Import Syncfusion® CSS styles

Themes for Syncfusion® React components can be imported using CSS or SASS styles provided in the npm packages. Additional customization options, CDN, and theme generation tools are available; see the themes topic for more information.

For this example, the Material 3 theme is imported into the src/pages/style.css file to style the Grid component and its dependencies.

@import "../../node_modules/@syncfusion/ej2-base/styles/material3.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material3.css";
@import "../../node_modules/@syncfusion/ej2-calendars/styles/material3.css";
@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material3.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material3.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material3.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css";
@import "../../node_modules/@syncfusion/ej2-react-grids/styles/material3.css";

The order of importing CSS styles should be in line with its dependency graph.

Add a Syncfusion® React component

Follow the below steps to add the React Grid component to the Vite project:

1. Before adding the Grid component to your markup, import the Grid component in the src/pages/index.tsx file.

import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';

2. Then, define the Grid component with the dataSource property and column definitions. Declare the values for the dataSource property.

import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import './style.css';

export function App() {
  const data = [
    {
      OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, ShipCountry: 'France', Freight: 32.38
    },
    {
      OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, ShipCountry: 'Germany', Freight: 11.61
    },
    {
      OrderID: 10250, CustomerID: 'HANAR', EmployeeID: 4, ShipCountry: 'Brazil', Freight: 65.83
    }
  ];
  return (
    <GridComponent dataSource={data}>
      <ColumnsDirective>
        <ColumnDirective field='OrderID' width='100' textAlign="Right" />
        <ColumnDirective field='CustomerID' width='100' />
        <ColumnDirective field='EmployeeID' width='100' textAlign="Right" />
        <ColumnDirective field='Freight' width='100' format="C2" textAlign="Right" />
        <ColumnDirective field='ShipCountry' width='100' />
      </ColumnsDirective>
    </GridComponent>
  );
}

export default App;

Run the project

To run the project, use the following command:

npm run develop

or

yarn run develop

The output will appear as follows:

gatsby

See also

Getting Started with the Syncfusion® React UI Component