Getting Started with React Spreadsheet in Preact

27 Aug 20262 minutes to read

This article outlines the steps required to set up a Preact project and integrate Syncfusion React Spreadsheet.

Preact is a fast, lightweight JavaScript library that provides a modern API similar to React. It is optimized for minimal file size and fast performance, making it well-suited for projects where load time and bundle size are important.

Prerequisites

Ensure the following requirements are met before starting:
System requirements for Syncfusion React Spreadsheet

Set up the Preact project

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

npm init preact@latest

or

yarn create preact

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

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

T  Preact - Fast 3kB alternative to React with the same modern API
|
*  Project directory:
|  my-project
—

Step 2: Choose the project language - Select JavaScript as the project language to build this Preact project.

T  Preact - Fast 3kB alternative to React with the same modern API
|
*  Project language:
|  > JavaScript
|    TypeScript
—

Step 3: Configure project options - Configure the project as shown below for this article.

T  Preact - Fast 3kB alternative to React with the same modern API
|
*  Use router?
|    Yes / > No
—
|
*  Prerender app (SSG)?
|    Yes / > No
—
|
*  Use ESLint?
|    Yes / > No
—

Step 4: Navigate to the project directory - After completing the above steps to create my-project, navigate to the project directory using the following command:

cd my-project

Ensure your HTML has a mount point for the app. For example, in index.html add:

<div id="app"></div>

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

Install the Syncfusion® React Spreadsheet package

To install the React Spreadsheet component package, use the following command:

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

or

yarn add @syncfusion/ej2-react-spreadsheet

Import the required CSS styles

Themes for Spreadsheet can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Tailwind 3 theme as an example, sourced from the theme package. In this package, each component includes an index.css file that automatically loads all the required dependency styles. To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme

Add the required Spreadsheet theme style reference to src/style.css file.

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/spreadsheet/index.css';

Adding Spreadsheet component

Add the React Spreadsheet component in src/index.js file using the following code:

import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
import './App.css';
export default function App() {
    return  (<SpreadsheetComponent/>);
}

Run the project

To run the project, use the following command:

npm run dev

or

yarn run dev

See also

Getting Started with React Spreadsheet