1010807: Diataxis changes for React PDF Viewer getting started

Document-Processing-toc.html

@@ -887,11 +887,21 @@
 					<li>
 						<a href="/document-processing/pdf/pdf-viewer/react/overview">React</a>
 						<ul>
-							<li>Getting Started
+							<li>
+								<a href="/document-processing/pdf/pdf-viewer/react/getting-started-overview">Getting Started</a>
 								<ul>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/getting-started">with Standalone PDF Viewer</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/getting-started-with-server-backed">with Server-Backed PDF Viewer</a></li>
-									<li><a href="/document-processing/pdf/pdf-viewer/react/preact">Preact</a></li>
+								</ul>
+							</li>
+							<li>
+								Environment Integration
+								<ul>
+                                    <li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/nextjs-getting-started">NextJS</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/gatsby">Gatsby</a></li>
+                                    <li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/preact">Preact</a></li>
+                                    <li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/remix">Remix</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/depoyment-integration/share-point">SharePoint Framework (SPFx)</a></li>
 								</ul>
 							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/react/feature-module">Feature Modules</a></li>

Document-Processing/PDF/PDF-Viewer/react/depoyment-integration/gatsby.md

@@ -0,0 +1,132 @@
+---
+layout: post
+title: Getting started with React PDF Viewer in Gatsby | Syncfusion
+description: How to integrate the Syncfusion React PDF Viewer into a Gatsby site (quickstart, how-to, reference, explanation).
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Getting started with the React PDF Viewer in Gatsby
+
+How to integrate the Syncfusion React PDF Viewer into a Gatsby site. Use the Quickstart below to get a working viewer, then consult the How-to and Reference sections for configuration details (WASM, static assets, and SSR notes).
+
+## Tutorial — Quickstart for Gatsby
+
+1. Create or open your Gatsby site.
+
+```bash
+# create a new Gatsby site (or use an existing one)
+gatsby new my-gatsby-site
+cd my-gatsby-site
+npm install
+```
+
+2. Install the PDF Viewer package:
+
+```bash
+npm install @syncfusion/ej2-react-pdfviewer --save
+```
+
+3. Optional — host runtime locally or use the CDN
+
+If you want to host the viewer runtime and WASM locally, copy the runtime files into Gatsby's `static` directory so they are served at the root URL (`/`). The example component below uses the CDN `resourceUrl` for a quick demo; hosting locally is recommended for production.
+
+Optional local copy (Unix/macOS / Git Bash / WSL):
+
+```bash
+cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib static/ej2-pdfviewer-lib
+# copy a sample PDF to static/assets (create folder if needed)
+mkdir -p static/assets && cp ./path/to/sample.pdf static/assets/sample.pdf
+```
+
+4. Add viewer CSS imports to `src/components/layout.css` (recommended for Gatsby component-scoped styling):
+
+Create `src/components/layout.css` and add the imports below (relative path to `node_modules` used from `src/components`):
+
+```css
+@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+```
+
+Then import the stylesheet in `gatsby-browser.js` at your project root so it is included in the client bundle:
+
+```js
+// gatsby-browser.js
+import './src/components/layout.css';
+```
+
+5. Use a client-only approach (Gatsby is server-side rendered). A simple and reliable pattern is to render the viewer after mount with a mounted flag. Create `src/components/pdfviewer.js` with the component below (the example also shows where to register a Syncfusion license if you have one):
+
+```js
+// src/components/pdfviewer.js
+import React, { useEffect, useState } from 'react';
+import {
+    PdfViewerComponent,
+    Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+    BookmarkView, ThumbnailView, Print, TextSelection, TextSearch
+    , FormFields, FormDesigner, Inject
+} from '@syncfusion/ej2-react-pdfviewer';
+
+export default function PdfViewer() {
+    const [isClient, setIsClient] = useState(false);
+
+    useEffect(() => setIsClient(true), []);
+
+    if (!isClient) return null; // prevent SSR crash (window not defined)
+
+    return (
+        <div style={{ height: "100vh" }}>
+            <PdfViewerComponent
+                id="pdfViewer"
+                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+                resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
+                style={{ height: "100%", width: "100%" }}
+            >
+                <Inject services={[
+                    Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+                    BookmarkView, ThumbnailView, Print, TextSelection, TextSearch,
+                    Magnification, FormFields, FormDesigner
+                ]} />
+            </PdfViewerComponent>
+        </div>
+    );
+}
+```
+
+Add a page that uses the component at `src/pages/index.js`:
+
+```js
+// src/pages/index.js
+import React from "react";
+import PdfViewer from "../components/pdfviewer";
+export default function PdfViewerPage() {
+  return (
+    <main>
+      <h1 style={{ padding: "10px 20px", background: "#f5f5f5" }}>
+        Syncfusion PDF Viewer in Gatsby
+      </h1>
+      <PdfViewer />
+    </main>
+  );
+}
+```
+
+6. Run the Gatsby dev server:
+
+```bash
+npm run develop
+```
+
+## See also
+
+- [Getting started overview](../getting-started-overview)
+- [Creating a Next.js application using Syncfusion React PDF Viewer](./nextjs-getting-started)
+- [Getting started with Syncfusion React PDF Viewer in Remix](./remix)

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

@@ -1,16 +1,16 @@
 ---
 layout: post
 title: React getting started with Next.js | Syncfusion
-description: Check out and learn here all about how to use the Syncfusion React UI components in the Next.js project.
+description: Check out and learn here all about how to use the Syncfusion React PDF Viewer in the Next.js project.
 control: PDF Viewer
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Creating a Next.js Application Using Syncfusion<sup style="font-size:70%">&reg;</sup> React Components
+# Creating a Next.js application using Syncfusion React PDF Viewer
 
-This section provides a step-by-step guide for setting up a Next.js application and integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> React PDF Viewer component.
+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.
 
 ## What is Next.js?
 
@@ -22,7 +22,9 @@ Before getting started with the Next.js application, ensure the following prereq
 
 * [Node.js 18.17](https://nodejs.org/en) or later.
 
-* The application is compatible with macOS, Windows, and Linux operating systems.
+ * The application is compatible with macOS, Windows, and Linux operating systems.
+
+* See the [System requirements](../../../../System-Requirements) for detailed platform requirements.
 
 ## Create a Next.js application
 
@@ -41,52 +43,49 @@ yarn create next-app
 {% endhighlight %}
 {% endtabs %}
 
-Using one of the above commands will lead you to set up additional configurations for the project as below:
-
-1.Define the project name: Users can specify the name of the project directly. Let's specify the name of the project as `ej2-nextjs-pdfviewer`.
+Using one of the above commands will prompt for project configuration options.
 
+1. Define the project name. For example: `ej2-next-js-pdfviewer`.
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
 
-√ What is your project named? » ej2-nextjs-pdfviewer
+√ What is your project named? » ej2-next-js-pdfviewer
 
 {% endhighlight %}
 {% endtabs %}
 
-2.Select the required packages.
-
+2. Select the required packages.
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
 
-√ What is your project named? ... ej2-nextjs-pdfviewer
+√ What is your project named? ... ej2-next-js-pdfviewer
 √ Would you like to use TypeScript? ... No / `Yes`
 √ Would you like to use ESLint? ... No / `Yes`
 √ Would you like to use Tailwind CSS? ... `No` / Yes
 √ Would you like to use `src/` directory? ... No / `Yes`
 √ Would you like to use App Router? (recommended) ... No / `Yes`
 √ Would you like to customize the default import alias? ... `No`/ Yes
-Creating a new Next.js app in D:\ej2-nextjs-pdfviewer.
+Creating a new Next.js app in D:\ej2-next-js-pdfviewer.
 
 {% endhighlight %}
 {% endtabs %}
 
-3.Once complete the above mentioned steps to create `ej2-nextjs-pdfviewer`, navigate to the directory using the below command:
-
+3. After the project is created, navigate to the project directory:
 {% tabs %}
 {% highlight bash tabtitle="CMD" %}
 
-cd ej2-nextjs-pdfviewer
+cd ej2-next-js-pdfviewer
 
 {% endhighlight %}
 {% endtabs %}
 
-The application is ready to run with default settings. Now, let's add Syncfusion<sup style="font-size:70%">&reg;</sup> components to the project.
+The application is ready to run with default settings. Next, add Syncfusion<sup style="font-size:70%">&reg;</sup> components to the project.
 
 ## Install Syncfusion<sup style="font-size:70%">&reg;</sup> React packages
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion<sup style="font-size:70%">&reg;</sup> React components in the project, install the corresponding npm package.
+Syncfusion<sup style="font-size:70%">&reg;</sup> React packages are available on npm. Install the package for the component required by the project.
 
-Here, the [React PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk) is used as an example. To install the React PDF Viewer component in the project, use the following command:
+This guide uses the [React PDF Viewer component](https://www.syncfusion.com/pdf-viewer-sdk) component as an example. Install it with:
 
 {% tabs %}
 {% highlight bash tabtitle="NPM" %}
@@ -103,13 +102,16 @@ yarn add @syncfusion/ej2-react-pdfviewer
 
 ## Import Syncfusion<sup style="font-size:70%">&reg;</sup> CSS styles
 
-Syncfusion<sup style="font-size:70%">&reg;</sup> React components come with [built-in themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/), which are available in the installed packages. It’s easy to adapt the Syncfusion<sup style="font-size:70%">&reg;</sup> React components to match the style of your application by referring to one of the built-in themes.
+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.
 
-Import the `Material` theme into the **src/app/globals.css** file and removed the existing styles in that file, as shown below:
+/* Where to add the imports: */
+/* - App Router: put these in `src/app/globals.css` */
+/* - Pages Router: put them in `pages/_app.js` or its imported global CSS */
 
 {% tabs %}
 {% highlight css tabtitle="globals.css" %}
 
+/* PDF Viewer theme and base styles */
 @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@@ -122,13 +124,13 @@ Import the `Material` theme into the **src/app/globals.css** file and removed th
 {% endhighlight %}
 {% endtabs %}
 
-> To know more about built-in themes and CSS reference for individual components, refer to the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme/) section.
+N> To learn more about built-in themes and CSS references for individual components, see the [themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) documentation.
 
-## Add Syncfusion<sup style="font-size:70%">&reg;</sup> React component
+## Add the Syncfusion<sup style="font-size:70%">&reg;</sup> React component
 
-Follow the below steps to add the React PDF Viewer componente to the Next.js project:
+Follow these steps to add the React PDF Viewer component to the Next.js project:
 
-1.Define the PDF Viewer component in the **src/app/page.tsx** file, as shown below:
+1. Define the PDF Viewer component in `src/app/page.tsx`, as shown below:
 
 {% tabs %}
 {% highlight ts tabtitle="page.tsx" %}
@@ -143,7 +145,7 @@ return (<div>
         <PdfViewerComponent
             id="container"
             documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
-            serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
+            resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
             style={{ 'height': '640px' }}>
                {/* Inject the required services */}
                <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
@@ -175,6 +177,10 @@ yarn run dev
 {% endhighlight %}
 {% endtabs %}
 
-To learn more about the functionality of the PDF Viewer component, refer to the [documentation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started#module-injection).
+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).
+
+N> [View the Next.js PDF Viewer sample in the GitHub repository](https://github.com/SyncfusionExamples/syncfusion-react-pdfviewer-component-in-nextjs)
+
+**See also**
 
-> [View the NEXT.js PDF Viewer sample in the GitHub repository](https://github.com/SyncfusionExamples/syncfusion-react-pdfviewer-component-in-nextjs).
+- [Adding Next.js Configuration for deployment](../getting-started#adding-nextjs-configuration)

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

@@ -0,0 +1,76 @@
+---
+layout: post
+title: Getting started with Syncfusion React PDF Viewer in Preact Application
+description: Provides a short overview and essential task links for integrating and using the Syncfusion React PDF Viewer within Preact.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+
+# Getting started with Syncfusion React PDF Viewer in Preact
+
+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.
+
+[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.
+## Setup
+
+How‑to: Create a Preact project and install the Syncfusion package.
+
+```bash
+npm init preact   # choose JavaScript or TypeScript as needed
+cd my-project
+npm install @syncfusion/ej2-react-pdfviewer --save
+# or
+yarn init preact
+yarn add @syncfusion/ej2-react-pdfviewer
+```
+
+## Import CSS
+
+How‑to: Add the required Syncfusion theme and component CSS to `src/style.css`.
+
+```css
+@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
+@import '../node_modules/@syncfusion/ej2-buttons/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-pdfviewer/styles/material3.css';
+```
+
+Note: keep import order consistent with component dependencies.
+
+## Add component
+
+How‑to: Render a minimal `PdfViewerComponent` in `src/index.js`.
+
+Prefer a single `Add component` example using the CDN `resourceUrl` (no server required). Replace the CDN version as needed.
+
+```js
+import { render } from 'preact';
+import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
+import './style.css';
+
+function App() {
+  return (
+    <PdfViewerComponent
+      id="container"
+      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+      resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
+      style={{ height: '640px' }}>
+      <Inject services={[Toolbar, Magnification, Navigation, Annotation]} />
+    </PdfViewerComponent>
+  );
+}
+
+render(<App />, document.getElementById('app'));
+```
+
+**See also**
+
+- [Getting started with the Syncfusion React PDF Viewer](../getting-started-overview)
+- [System requirements for Syncfusion React PDF Viewer](../../../../System-Requirements)