Skip to content

Commit 278eebf

Browse files
DinakarSF4212DinakarSF4212
committed
1011820: Need to include the UG section to render the Spreadsheet in different React Environments.
1 parent 437f84d commit 278eebf

1 file changed

Lines changed: 96 additions & 52 deletions

File tree

‎Document-Processing/Excel/Spreadsheet/React/Environment Integrations/preact-getting-started.md‎

Lines changed: 96 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,132 @@
11
---
22
layout: post
33
title: React Spreadsheet getting started with Preact | Syncfusion
4-
description: Provides a short overview for integrating and using the Syncfusion React Spreadsheet within Preact.
4+
description: Integrate and use the Syncfusion React Spreadsheet component within a Preact app (Diátaxis-compliant).
55
control: Spreadsheet
66
platform: document-processing
77
documentation: ug
88
---
99

1010
# Getting started with Syncfusion React Spreadsheet in Preact
1111

12-
This section helps you to quickly integrate the Syncfusion **React Spreadsheet** component into a [Preact](https://preactjs.com) application.
12+
**Purpose**
13+
- Quick tutorial and task-focused how‑to for integrating Syncfusion React Spreadsheet into a Preact app, plus short explanations and references.
1314

14-
[Preact](https://preactjs.com) is a lightweight alternative to React that provides a React‑compatible API through `preact/compat`, which enables Syncfusion React components to work seamlessly without additional configuration.
15-
16-
This page focuses on the required setup: installing packages, adding styles, and rendering the Spreadsheet component.
17-
18-
## Dependencies
19-
20-
The following list of dependencies are required to use the Spreadsheet component in your application:
21-
22-
```js
23-
|-- @syncfusion/ej2-react-spreadsheet
24-
|-- @syncfusion/ej2-react-base
25-
|-- @syncfusion/ej2-spreadsheet
26-
|-- @syncfusion/ej2-base
27-
|-- @syncfusion/ej2-dropdowns
28-
|-- @syncfusion/ej2-navigations
29-
|-- @syncfusion/ej2-grids
30-
31-
```
32-
33-
## Setup
34-
35-
Create a new Preact project and install the Syncfusion React Spreadsheet package.
15+
**Audience & prerequisites**
16+
- Developers familiar with Node.js and basic React/Preact concepts.
17+
- Node.js 18+ and a package manager (npm/yarn/pnpm).
18+
- A valid Syncfusion license key (optional for evaluation but recommended).
3619

20+
## Tutorial (step-by-step quickstart)
21+
1. Create a new Preact project (Preact CLI or Vite + Preact). Example using Preact CLI:
3722
```bash
3823
npm init preact
3924
cd my-project
25+
npm install
26+
```
27+
2. Install the Spreadsheet package:
28+
```bash
4029
npm install @syncfusion/ej2-react-spreadsheet --save
41-
42-
# or using yarn:
43-
yarn init preact
44-
yarn add @syncfusion/ej2-react-spreadsheet
4530
```
31+
3. Configure the bundler to alias React → preact/compat (see How‑to below).
32+
4. Add Syncfusion styles and render the component (example below).
33+
5. Start the dev server:
34+
```bash
35+
npm run dev
36+
```
37+
6. Open the app in the browser and verify the Spreadsheet renders.
4638

47-
## Adding CSS reference
48-
49-
Add components style as given below in `src/styles.css`.
39+
## How-to add styles and render spreadsheet
5040

41+
**Task**: Add component CSS (recommended import in entry stylesheet)
42+
- Create or update `src/style.css`:
5143
```css
52-
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
53-
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
54-
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
55-
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
56-
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
57-
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
58-
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
59-
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
60-
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
61-
@import '../node_modules/@syncfusion/ej2-react-spreadsheet/styles/material.css';
44+
@import '@syncfusion/ej2-base/styles/material.css';
45+
@import '@syncfusion/ej2-inputs/styles/material.css';
46+
@import '@syncfusion/ej2-buttons/styles/material.css';
47+
@import '@syncfusion/ej2-splitbuttons/styles/material.css';
48+
@import '@syncfusion/ej2-lists/styles/material.css';
49+
@import '@syncfusion/ej2-navigations/styles/material.css';
50+
@import '@syncfusion/ej2-popups/styles/material.css';
51+
@import '@syncfusion/ej2-dropdowns/styles/material.css';
52+
@import '@syncfusion/ej2-grids/styles/material.css';
53+
@import '@syncfusion/ej2-react-spreadsheet/styles/material.css';
6254
```
6355

64-
## Adding Spreadsheet component
65-
66-
Now, you can import the spreadsheet component into your `src/index.jsx` file.
67-
56+
**Task**: Minimal app rendering the Spreadsheet (`src/index.jsx`)
6857
```js
6958
import { render } from 'preact';
7059
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';
7160
import './style.css';
7261

7362
function App() {
74-
return (
75-
<SpreadsheetComponent />
76-
);
63+
return <SpreadsheetComponent height={500} />;
7764
}
7865

7966
render(<App />, document.getElementById('app'));
8067
```
8168

82-
## Run the application
69+
**Task**: Register Syncfusion license (client-side)
70+
- In your client entry (e.g., `src/main.jsx`) run registerLicense on mount:
71+
```js
72+
import { registerLicense } from '@syncfusion/ej2-base';
73+
74+
if (typeof window !== 'undefined') {
75+
const key = import.meta?.env?.VITE_SYNCFUSION_LICENSE_KEY || process.env.SYNCFUSION_LICENSE_KEY;
76+
if (key) registerLicense(key);
77+
}
78+
```
8379

84-
Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
80+
**How-to: Configure bundler alias (React → Preact)**
81+
**Vite (vite.config.js / ts):**
82+
```js
83+
import { defineConfig } from 'vite';
84+
import preact from '@preact/preset-vite';
85+
86+
export default defineConfig({
87+
plugins: [preact()],
88+
resolve: {
89+
alias: {
90+
react: 'preact/compat',
91+
'react-dom/test-utils': 'preact/test-utils',
92+
'react-dom': 'preact/compat'
93+
}
94+
}
95+
});
96+
```
8597

86-
## See Also
98+
**Webpack (webpack.config.js):**
99+
```js
100+
resolve: {
101+
alias: {
102+
react: 'preact/compat',
103+
'react-dom/test-utils': 'preact/test-utils',
104+
'react-dom': 'preact/compat'
105+
}
106+
}
107+
```
108+
109+
**Explanation**: Why this is needed
110+
- Syncfusion React components target the React API. `preact/compat` provides a compatible layer so React-based components work in Preact without rewriting code.
111+
- The alias ensures imports of `react`/`react-dom` resolve to Preact implementations at build time.
112+
- Client-only APIs (e.g., window) must run in browser context; register license and any window-dependent code during client mount.
113+
114+
## Reference snippets / dependency tree
115+
Dependencies installed by the package (for reference):
116+
```
117+
@syncfusion/ej2-react-spreadsheet
118+
├─ @syncfusion/ej2-react-base
119+
├─ @syncfusion/ej2-spreadsheet
120+
├─ @syncfusion/ej2-base
121+
├─ @syncfusion/ej2-dropdowns
122+
├─ @syncfusion/ej2-navigations
123+
├─ @syncfusion/ej2-grids
124+
└─ ...
125+
```
87126

88-
* [Getting started Syncfusion React Spreadsheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started)
127+
## Reference (quick links)
128+
- [Syncfusion React Spreadsheet](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/getting-started)
129+
- [System requirements for Syncfusion React PDF Viewer](../../../../System-Requirements)
130+
- [Preact](https://preactjs.com)
131+
- [Preact/compat](https://preactjs.com/guide/v10/compat)
132+
- [Vite + Preact preset](https://github.com/preactjs/preset-vite)

0 commit comments

Comments
 (0)