Skip to content

Commit 36a921f

Browse files
VenkadaSubramanian-DuraiVenkadaSubramanian-Durai
committed
1010807: Diataxis changes for NextJs and environment integration
1 parent 31531ab commit 36a921f

6 files changed

Lines changed: 108 additions & 217 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -893,7 +893,13 @@
893893
<ul>
894894
<li><a href="/document-processing/pdf/pdf-viewer/react/getting-started">with Standalone PDF Viewer</a></li>
895895
<li><a href="/document-processing/pdf/pdf-viewer/react/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
896-
<li><a href="/document-processing/pdf/pdf-viewer/react/preact">Preact</a></li>
896+
</ul>
897+
</li>
898+
<li>
899+
Environment Integration
900+
<ul>
901+
<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/preact">Preact</a></li>
902+
<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/nextjs-getting-started">NextJS</a></li>
897903
</ul>
898904
</li>
899905
<li><a href="/document-processing/pdf/pdf-viewer/react/feature-module">Feature Modules</a></li>

Document-Processing/PDF/PDF-Viewer/react/nextjs-getting-started.md renamed to Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/nextjs-getting-started.md

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ domainurl: ##DomainURL##
1010

1111
# Creating a Next.js application using Syncfusion<sup style="font-size:70%">&reg;</sup> React components
1212

13+
What you'll build / time: A Next.js app integrating the Syncfusion React PDF Viewer — ~15 minutes.
14+
1315
This guide shows how to set up a Next.js application and integrate the Syncfusion<sup style="font-size:70%">&reg;</sup> React PDF Viewer component.
1416

1517
## What is Next.js?
@@ -22,7 +24,9 @@ Before getting started with the Next.js application, ensure the following prereq
2224

2325
* [Node.js 18.17](https://nodejs.org/en) or later.
2426

25-
* The application is compatible with macOS, Windows, and Linux operating systems.
27+
* The application is compatible with macOS, Windows, and Linux operating systems.
28+
29+
* See the [System requirements](../../../../System-Requirements.md) for detailed platform requirements.
2630

2731
## Create a Next.js application
2832

@@ -100,21 +104,18 @@ yarn add @syncfusion/ej2-react-pdfviewer
100104

101105
## Import Syncfusion<sup style="font-size:70%">&reg;</sup> CSS styles
102106

103-
Syncfusion<sup style="font-size:70%">&reg;</sup> React components include built-in themes. Import a theme to match the look and feel of the application.
107+
Syncfusion<sup style="font-size:70%">&reg;</sup> React components include built-in themes. Import the PDF Viewer theme and base styles to match the look and feel of the application.
104108

105-
For projects using the App Router, add the imports to `src/app/globals.css`. For projects using the Pages Router, add them to a global stylesheet such as `pages/_app.js` or its CSS import. Remove or consolidate any conflicting styles as needed.
109+
/* Where to add the imports: */
110+
/* - App Router: put these in `src/app/globals.css` */
111+
/* - Pages Router: put them in `pages/_app.js` or its imported global CSS */
106112

107113
{% tabs %}
108114
{% highlight css tabtitle="globals.css" %}
109115

116+
/* Minimal recommended imports: PDF Viewer theme and base styles */
110117
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
111-
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
112-
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
113-
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
114-
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
115-
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
116-
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
117-
@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
118+
@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
118119

119120
{% endhighlight %}
120121
{% endtabs %}
@@ -174,4 +175,4 @@ yarn run dev
174175

175176
To learn more about the PDF Viewer component, see the [documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started#module-injection).
176177

177-
N> [View the Next.js PDF Viewer sample in the GitHub repository]https://github.com/SyncfusionExamples/syncfusion-react-pdfviewer-component-in-nextjs
178+
N> [View the Next.js PDF Viewer sample in the GitHub repository](https://github.com/SyncfusionExamples/syncfusion-react-pdfviewer-component-in-nextjs)

‎Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/preact.md‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
layout: post
3+
title: Getting started with Syncfusion React PDF Viewer in Preact
4+
description: Short overview and task links for using the Syncfusion React PDF Viewer with Preact.
5+
control: PDF Viewer
6+
platform: document-processing
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
12+
# Getting started with Syncfusion React PDF Viewer in Preact
13+
14+
This page is a short, task-focused overview for integrating the Syncfusion React PDF Viewer into a [Preact](https://preactjs.com/) app. Use the short sections below for quick tasks; a minimal full example is provided as an optional reference.
15+
16+
[Preact](https://preactjs.com/) is a lightweight React alternative that preserves the React-compatible API. Use Preact when you want smaller bundle size while reusing the React viewer components.
17+
## Setup
18+
19+
How‑to: Create a Preact project and install the Syncfusion package.
20+
21+
```bash
22+
npm init preact # choose JavaScript or TypeScript as needed
23+
cd my-project
24+
npm install @syncfusion/ej2-react-pdfviewer --save
25+
# or
26+
yarn init preact
27+
yarn add @syncfusion/ej2-react-pdfviewer
28+
```
29+
30+
## Import CSS
31+
32+
How‑to: Add the required Syncfusion theme and component CSS to `src/style.css`.
33+
34+
```css
35+
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
36+
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
37+
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
38+
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';
39+
@import '../node_modules/@syncfusion/ej2-navigations/styles/material3.css';
40+
@import '../node_modules/@syncfusion/ej2-popups/styles/material3.css';
41+
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material3.css';
42+
@import '../node_modules/@syncfusion/ej2-react-pdfviewer/styles/material3.css';
43+
```
44+
45+
Note: keep import order consistent with component dependencies.
46+
47+
## Add component
48+
49+
How‑to: Render a minimal `PdfViewerComponent` in `src/index.jsx`.
50+
51+
Prefer a single `Add component` example using the CDN `resourceUrl` (no server required). Replace the CDN version as needed.
52+
53+
```js
54+
import { render } from 'preact';
55+
import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
56+
import './style.css';
57+
58+
function App() {
59+
return (
60+
<PdfViewerComponent
61+
id="container"
62+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
63+
resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
64+
style={{ height: '640px' }}>
65+
<Inject services={[Toolbar, Magnification, Navigation, Annotation]} />
66+
</PdfViewerComponent>
67+
);
68+
}
69+
70+
render(<App />, document.getElementById('app'));
71+
```
72+
73+
**See also**
74+
75+
- [Getting started with the Syncfusion React PDF Viewer](./getting-started-overview)
76+
- [System requirements for Syncfusion React PDF Viewer](https://help.syncfusion.com/document-processing/system-requirements)

‎Document-Processing/PDF/PDF-Viewer/react/open-pdf-files.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ Example (TypeScript / React):
2424
```tsx
2525
import * as React from 'react';
2626
import * as ReactDOM from 'react-dom/client';
27-
import { PdfViewerComponent, Inject } from '@syncfusion/ej2-react-pdfviewer';
27+
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView,
28+
Print, TextSelection, Annotation, TextSearch, Inject, FormDesigner, FormFields }
2829

2930
function App() {
3031
return (
@@ -33,7 +34,8 @@ function App() {
3334
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
3435
resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
3536
style={{ height: '640px' }}>
36-
<Inject />
37+
<Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
38+
Print, TextSelection, TextSearch, FormDesigner, FormFields ]} />
3739
</PdfViewerComponent>
3840
);
3941
}

‎Document-Processing/PDF/PDF-Viewer/react/preact.md‎

Lines changed: 0 additions & 195 deletions
This file was deleted.

0 commit comments

Comments
 (0)