1041003: Documentation for react UG for How-To samples

Document-Processing/PDF/PDF-Viewer/react/how-to/load-document-after-resources-loaded.md

@@ -1,20 +1,20 @@
 ---
 layout: post
-title: Load document after resources Loaded React PDF Viewer | Syncfusion
+title: Load a Document After PDFium Resources Are Ready | Syncfusion
 description: Learn how to load a PDF only after assets are ready in the Syncfusion React PDF Viewer (Standalone) using the resourcesLoaded event.
 platform: document-processing
-control: PDF Viewer 
+control: PDF Viewer
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Load a PDF only after PDFium resources are ready
+# Ensure PDFium resources are ready before loading PDFs
 
-When using the Standalone PDF Viewer, the component downloads the PDFium runtime assets (scripts/wasm) from the path specified in `resourceUrl`. Attempting to load a document before those assets are available can cause errors. Use the `resourcesLoaded` event to defer document loading until all required assets are ready.
+When using the Standalone PDF Viewer, the component downloads the PDFium runtime assets (scripts/wasm) from the path specified in `resourceUrl`. Calling `load()` before those assets are ready can fail with a "PDFium not initialized" error or silently leave the viewer blank. Use the `resourcesLoaded` event to defer document loading until all required assets are ready.
 
 ## When does resourcesLoaded trigger?
 
-The resourcesLoaded event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the load method to open a document (by URL or Base64).
+The `resourcesLoaded` event fires once the viewer finishes loading all required PDFium assets. At this point, it is safe to call the `load` method to open a document (by URL or Base64). The event fires for the viewer's asset-load life cycle, not for every document load, so you can call `load` again later (for example, in response to a user action) without waiting for the event.
 
 ## How to load a document after resourcesLoaded
 
@@ -44,21 +44,20 @@ import {
 } from '@syncfusion/ej2-react-pdfviewer';
 
 function App() {
+  // viewerRef is a stable ref; it does not need to be a useCallback dependency.
   const viewerRef = useRef(null);
 
   const onResourcesLoaded = useCallback(() => {
-    // Choose ONE of the following load options:
+    // PDFium assets are ready; it is safe to call load() now.
 
     // 1) Load by URL (recommended for your case)
     viewerRef.current?.load(
       'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
       ''
     );
 
-    // 2) Load by Base64 (uncomment if needed)
-    // supply your Base64 string
-    // const base64 ='data:application/pdf;base64,JVBERi0xLjMNCiXi48...';
-
+    // 2) Load by Base64 (uncomment to use).
+    // const base64 = 'data:application/pdf;base64,JVBERi0xLjMNCiXi48...';
     // if (base64) {
     //   viewerRef.current?.load(base64, '');
     // }
@@ -93,7 +92,7 @@ function App() {
   );
 }
 
-// Mount (make sure you have <div id="sample"></div> in index.html)
+// Mount the app (make sure you have <div id="sample"></div> in index.html).
 const container = document.getElementById('sample');
 const root = createRoot(container);
 root.render(<App />);
@@ -103,13 +102,13 @@ root.render(<App />);
 
 ## Notes and best practices
 
-- Always set a valid resourceUrl when using the Standalone PDF Viewer. If the path is incorrect or blocked by the network, the event cannot fire.
-- Load documents inside resourcesLoaded. This guarantees the PDFium runtime is ready and prevents intermittent errors on slower networks.
-- The event fires for the viewer’s asset load life cycle, not for every document load. After it fires once, you can safely call load again later (for example, in response to user actions) without waiting for the event.
+- Always set a valid `resourceUrl` when using the Standalone PDF Viewer. If the path is incorrect, the event will not fire and `load()` will fail.
+- If the assets CDN is blocked by the network, the event will not fire. Allow list the asset host (and the document URL host, when applicable) in CORS and CSP settings.
+- Load documents inside `resourcesLoaded` to guarantee that the PDFium runtime is ready and to prevent intermittent errors on slower networks.
 
 ## See also
 
-- [Events in React PDF Viewer](../events#resourcesloaded)
-- [Open PDF files](../open-pdf-files)
-- [Save PDF files](../save-pdf-files)
-- [Getting started](../getting-started)
+- [Events in React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/events)
+- [Open PDF files](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/open-pdf-files)
+- [Save PDF files](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/save-pdf-files)
+- [Getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started)

Document-Processing/PDF/PDF-Viewer/react/how-to/load-document.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Load documents dynamically in React PDF Viewer
 
-The PDF Viewer supports loading or switching PDF documents at runtime after the initial viewer initialization. Use the [load](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#load) method to open a document from a URL or a Base64 string.
+The PDF Viewer supports loading or switching PDF documents at runtime after the initial viewer initialization. Use the [load] (https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#load) method to open a document from a URL or a Base64 string.
 
 The following steps show common approaches for loading documents dynamically.
 
@@ -29,13 +29,13 @@ The following steps show common approaches for loading documents dynamically.
   </script>
 ```
 
-**Step 3:** Use the following code snippet to load a PDF document from a URL (document name).
+**Step 3:** Use the following code snippet to load a PDF document from a URL.
 
 ```
   <button id='load2'>LoadDocument</button>
 
   <script>
-  // Load PDF document using a file name
+  // Load PDF document from a URL
   function load_2(){
     var viewer = document.getElementById('container').ej2_instances[0];
     viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
@@ -108,4 +108,8 @@ root.render(<App />);
 {% endhighlight %}
 {% endtabs %}
 
-Find the sample: [Load PDF documents dynamically](https://stackblitz.com/edit/react-nszkto?file=src%2Findex.js)
+Find the sample: [Load PDF documents dynamically](https://stackblitz.com/edit/react-nszkto?file=src%2Findex.js)
+
+## See also
+- [Getting started with React PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started)
+- [PDF Viewer API reference](https://ej2.syncfusion.com/react/documentation/api/pdfviewer)

Document-Processing/PDF/PDF-Viewer/react/how-to/load-n-number-page.md

@@ -1,18 +1,18 @@
 ---
 layout: post
-title: Load N number of pages on initial loading | Syncfusion
-description: Learn how to Load N number of pages on initial loading in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Load N number of pages on initial loading
+title: Load N pages on initial load | Syncfusion
+description: Learn how to load a specific number of pages during initial rendering in the Syncfusion React PDF Viewer for improved performance.
+control: Load N pages on initial load
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Load N pages initially
+# Load Initial Pages in PDF Viewer
 
 Control the number of pages the PDF Viewer renders on the initial load to improve perceived performance and reduce initial memory usage. Additional pages are rendered dynamically as the user scrolls through the document, allowing quick access to early pages without loading the entire file.
 
-Set the [initialRenderPages](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#initialrenderpages) property to specify how many pages to render initially. For large documents, avoid high values for `initialRenderPages` because rendering many pages at once increases memory use and may slow loading. Typical ranges of 10–20 pages work well for most documents; adjust based on document size and client capabilities.
+Set the [initialRenderPages] (https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#initialrenderpages) property to specify how many pages to render initially. For large documents, avoid high values for `initialRenderPages` because rendering many pages at once increases memory use and may slow loading. Typical ranges of 10–20 pages work well for most documents; adjust based on document size and client capabilities.
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
@@ -32,8 +32,8 @@ function App() {
         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': '640px' }}
-        initialRenderPages = {10}>
-              <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, Annotation,
+        initialRenderPages={10}>
+              <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
                                   BookmarkView, ThumbnailView, Print, TextSelection, TextSearch]} />
       </PdfViewerComponent>
     </div>
@@ -62,8 +62,8 @@ function App() {
         documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
         serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
         style={{ 'height': '640px' }}
-        initialRenderPages = {10}>
-              <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, Annotation,
+        initialRenderPages={10}>
+              <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
                                   BookmarkView, ThumbnailView, Print, TextSelection, TextSearch]} />
       </PdfViewerComponent>
     </div>

Document-Processing/PDF/PDF-Viewer/react/how-to/load-pdf-viewer-with-local-resources.md

@@ -1,8 +1,8 @@
 ---
 layout: post
 title: Load PDF Viewer with Local Resources in React | Syncfusion
-description: Learn how to configure the Syncfusion React PDF Viewer to load PDF documents and resources locally instead of from CDN.
-control: PDF Viewer
+description: Configure the Syncfusion React PDF Viewer to load PDF documents and library files from local resources.
+control: PdfViewer
 platform: document-processing
 documentation: ug
 ---
@@ -19,7 +19,7 @@ Follow the [getting started guide](../getting-started) to create a basic React P
 
 ### Step 1: Copy the Resource Files
 
-Copy the `ej2-pdfviewer-lib` folder to `public/assets/` using the following command:
+From the root directory of your React project, run one of the following commands to copy the `ej2-pdfviewer-lib` folder into `public/assets/`:
 
 {% tabs %}
 {% highlight bash tabtitle="Windows" %}
@@ -60,22 +60,23 @@ Configure the PDF Viewer to use local paths:
 import * as ReactDOM from 'react-dom/client';
 import * as React from 'react';
 import './index.css';
+import '@syncfusion/ej2-react-pdfviewer/styles/material.css';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-        BookmarkView,ThumbnailView, Print, TextSelection, Annotation, TextSearch,
+        BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch,
         FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer';
 
 function App() {
     return (<div>
     <div className='control-section'>
       <PdfViewerComponent
         id="container"
-        // Path to your PDF document in the assets folder
+        // URL of the PDF document to load
         documentPath={window.location.origin + "/assets/pdfsuccinctly.pdf"}
-        // Path to the PDFium library files in the assets folder
+        // URL of the PDFium library folder
         resourceUrl={window.location.origin + "/assets/ej2-pdfviewer-lib"}
         style={{ 'height': '640px' }}>
 
-         <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]}/>
+         <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]}/>
 
       </PdfViewerComponent>
     </div>
@@ -92,22 +93,23 @@ root.render(<App />);
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import '@syncfusion/ej2-react-pdfviewer/styles/material.css';
 import  { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
-          BookmarkView,ThumbnailView, Print, TextSelection, Annotation, TextSearch,
+          BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch,
           FormFields, FormDesigner, Inject} from '@syncfusion/ej2-react-pdfviewer';
 
 export function App() {
   return (<div>
     <div className='control-section'>
       <PdfViewerComponent
         id="container"
-        // Path to your PDF document in the assets folder
+        // URL of the PDF document to load
         documentPath={window.location.origin + "/assets/pdfsuccinctly.pdf"}
-        // Path to the PDFium library files in the assets folder
+        // URL of the PDFium library folder
         resourceUrl={window.location.origin + "/assets/ej2-pdfviewer-lib"}
         style={{ 'height': '640px' }}>
 
-         <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]}/>
+         <Inject services={[ Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner ]}/>
 
       </PdfViewerComponent>
     </div>

Document-Processing/PDF/PDF-Viewer/react/how-to/lock-annotation.md

@@ -1,18 +1,18 @@
 ---
 layout: post
-title: Lock annotation in React Pdfviewer component | Syncfusion
-description: Learn here all about Lock annotation in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more.
-control: Lock annotation
+title: Lock annotation in React PDF Viewer component | Syncfusion
+description: Learn how to lock square or rectangle annotations in the Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more.
+control: PDF Viewer
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Lock annotation in React Pdfviewer component
+# Lock annotation in React PDF Viewer component
 
 The PDF Viewer supports locking annotations to prevent users from moving, resizing, or removing them. Locking can be applied via annotation settings or by handling viewer events and updating annotation metadata.
 
-**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) to create simple PDF Viewer sample in React.
+**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample in React.
 
 **Step 2:** Add the following code snippet to lock the rectangle or square annotations.
 
@@ -24,9 +24,8 @@ The PDF Viewer supports locking annotations to prevent users from moving, resizi
       id="container"
        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
-      // lock annotation
-      rectangleSettings={{ isLock: true }}
-      style={{ height: '640px' }}>
+       rectangleSettings={{ isLock: true }}
+       style={{ height: '640px' }}>
       </PdfViewerComponent>
 
 {% endraw %}
@@ -38,13 +37,19 @@ The PDF Viewer supports locking annotations to prevent users from moving, resizi
       id="container"
        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
-      // lock annotation
-      rectangleSettings={{ isLock: true }}
-      style={{ height: '640px' }}>
+       rectangleSettings={{ isLock: true }}
+       style={{ height: '640px' }}>
       </PdfViewerComponent>
 
 {% endraw %}
 {% endhighlight %}
 {% endtabs %}
 
-Find the Sample [how to lock square or rectangle annotations](https://stackblitz.com/edit/react-yxp8kz?file=src%2Findex.js)
+See the sample: [how to lock square or rectangle annotations](https://stackblitz.com/edit/react-yxp8kz?file=src%2Findex.js)
+
+## See also
+
+- [`RectangleSettings` API reference](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/rectanglesettings)
+- [Getting started with React Standalone PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started)
+- [Getting started with React Server-Backed PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started-with-server-backed)
+- [How to create and run a custom PDF Viewer Web Service](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/how-to/create-and-run-custom-pdf-viewer-web-service)

Document-Processing/PDF/PDF-Viewer/react/how-to/min-max-zoom.md

@@ -7,17 +7,17 @@ platform: document-processing
 documentation: ug
 ---
 
-# Configure minZoom and maxZoom in the PDF Viewer
+# Configure minZoom and maxZoom in the React PDF Viewer
 
-The PDF Viewer exposes [minZoom](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#minzoom) and [maxZoom](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#maxzoom) to control the allowable zoom range for document viewing. Setting these properties helps maintain readability, performance, and a consistent experience across devices.
+The PDF Viewer exposes [minZoom] (https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#minzoom) and [maxZoom] (https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#maxzoom) to control the allowable zoom range for document viewing. Setting these properties helps maintain readability, performance, and a consistent experience across devices.
 
 ### minZoom
 
-`minZoom` sets the minimum zoom percentage the viewer supports. Use this to prevent users from zooming out to levels that make content unreadable or negatively affect layout.
+`minZoom` sets the minimum zoom percentage the viewer supports. The default value is `10` (10%). Values below 10 are automatically clamped to 10. Use this to prevent users from zooming out to levels that make content unreadable or negatively affect layout.
 
 ### maxZoom
 
-`maxZoom` sets the maximum zoom percentage the viewer supports. Restricting the maximum helps avoid excessive memory use and degraded rendering performance when users zoom in very far.
+`maxZoom` sets the maximum zoom percentage the viewer supports. The default value is `400` (400%). Values above 400 are automatically clamped to 400. Restricting the maximum helps avoid excessive memory use and degraded rendering performance when users zoom in very far.
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
@@ -97,7 +97,7 @@ import * as React from 'react';
 import './index.css';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
          BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation,
-         FormFields, FormDesigner, PageOrganizer Inject } from '@syncfusion/ej2-react-pdfviewer';
+         FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
 import  {Browser} from '@syncfusion/ej2-base';
 
 function App() {
@@ -140,7 +140,7 @@ import * as React from 'react';
 import './index.css';
 import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
          BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, Annotation,
-         FormFields, FormDesigner, PageOrganizer Inject } from '@syncfusion/ej2-react-pdfviewer';
+         FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
 import  {Browser} from '@syncfusion/ej2-base';
 
 function App() {