From a476761161603c46520307c71a481396b27cc6c8 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 14 Jul 2026 11:21:02 +0530 Subject: [PATCH 01/32] updated the add-annotation-in-text-search.md file --- .../react/how-to/add-annotation-in-text-search.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-annotation-in-text-search.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-annotation-in-text-search.md index 68f6b7f685..4e4e802bf1 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-annotation-in-text-search.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-annotation-in-text-search.md @@ -7,9 +7,9 @@ platform: document-processing documentation: ug --- -# Add Annotations via Text Search in PDF Viewer +# Add Annotations via Text Search in Syncfusion React PDF Viewer -A concise guide that demonstrates how to add rectangle and highlight annotations at highlighted text search results in the React PDF Viewer. The guide explains where to wire the callback, required services, and quick troubleshooting steps. +A concise guide that demonstrates how to add rectangle and highlight annotations to text matched by a search in the Syncfusion React PDF Viewer. The guide explains where to wire the callback and the required services. ## Prerequisites @@ -19,7 +19,7 @@ A React PDF Viewer setup with [`Annotation`](https://ej2.syncfusion.com/react/do **Step 1:** Follow the steps provided in the [Syncfusion® Getting Started Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to set up a basic PDF Viewer sample. -**Step 2a:** Set up the PDF Viewer component to add rectangle annotations based on the bounds of highlighted search text in the PDF Viewer. +**Step 2a:** Add a rectangle annotation based on the bounds of each highlighted search match. {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -96,7 +96,7 @@ export default function App() { **Expected result:** Rectangle annotations are added at text search result locations, improving visibility for users navigating search matches. -**Step 2b:** Set up the PDF Viewer component to add highlight annotations based on the bounds of highlighted search text in the PDF Viewer. +**Step 2b:** Add a highlight annotation based on the bounds of each highlighted search match. {% tabs %} {% highlight js tabtitle="Standalone" %} From fc3473cb88170bd255c5f9f0fcd6cf59a3a4e7d8 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 14 Jul 2026 11:27:08 +0530 Subject: [PATCH 02/32] updated the add-header-value.md file --- .../PDF/PDF-Viewer/react/how-to/add-header-value.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-header-value.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-header-value.md index c78eab1dec..b3fdb0069e 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-header-value.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-header-value.md @@ -7,11 +7,11 @@ control: PDF Viewer documentation: ug --- -# Add header values in the React PDF Viewer +# Add header values to AJAX requests in the React PDF Viewer Use the `ajaxHeaders` property inside the PDF Viewer’s [ajaxRequestSettings](https://ej2.syncfusion.com/React/documentation/api/pdfviewer/#ajaxrequestsettings) to send custom HTTP headers with each request made by the viewer. -Example: Add a custom Authorization header using `ajaxRequestSettings` in an React component +Example: Add a custom Authorization header using `ajaxRequestSettings` in a React component ```ts @@ -19,14 +19,11 @@ viewer.ajaxRequestSettings = { ajaxHeaders: [ { headerName: "Authorization", - headerValue: "Bearer 64565dfgfdsjweiuvbiuyhiueygf" } ], - withCredentials: false }; - ``` Find the sample [how to add custom headers in AjaxRequestSettings](https://stackblitz.com/edit/react-dnkbqh66-tnifjnlb?file=package.json,index.js) \ No newline at end of file From 6c96790a1492b63cbc6b254b6c5adbf9c41bdd73 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 14 Jul 2026 11:38:23 +0530 Subject: [PATCH 03/32] updated the add-save-button.md file --- .../PDF-Viewer/react/how-to/add-save-button.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-save-button.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-save-button.md index 7b0013af61..747f93542e 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-save-button.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-save-button.md @@ -38,13 +38,13 @@ function OnCreateSearch() { this.addIcon('prepend', 'e-icons e-search'); } - var toolItem1 = { + const toolItem1 = { prefixIcon: 'e-icons e-save', id: 'download', text: 'Save', tooltipText: 'Save button', align: 'Left' -}; + }; function toolbarClick(args){ if (args.item && args.item.id === 'download') { @@ -90,16 +90,16 @@ function OnCreateSearch() { this.addIcon('prepend', 'e-icons e-search'); } - var toolItem1 = { + const toolItem1 = { prefixIcon: 'e-icons e-save', id: 'download', text: 'Save', tooltipText: 'Save button', align: 'Left' -}; + }; function toolbarClick(args){ - var viewer = document.getElementById('container').ej2_instances[0]; + const viewer = document.getElementById('container').ej2_instances[0]; if (args.item && args.item.id === 'download') { viewer.download(); } @@ -131,7 +131,7 @@ N> Default toolbar items include: ['OpenOption', 'PageNavigationTool', 'Magnific ### Align property -Specifies the alignment of the Save button within the toolbar: +Specifies the alignment of the Save button within the toolbar. Valid values are: * Left: aligns the item to the left side of the toolbar. * Right: aligns the item to the right side of the toolbar. @@ -144,17 +144,17 @@ Sets the tooltip text for the Save button; the tooltip appears on hover. Applies custom CSS classes to the Save button for styling. -### Prefix property +### prefixIcon property Sets the CSS class or icon to display before the Save button text. ### ID property -The id property within a CustomToolbarItemModel is required and uniquely identifies each toolbar item for configuration and interaction. +The `id` property within a `CustomToolbarItemModel` is required and uniquely identifies each toolbar item for configuration and interaction. When defining or customizing toolbar items, assign a specific, descriptive id to each item. These properties are commonly used when defining custom toolbar items with `CustomToolbarItemModel` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings` property, include these properties to customize appearance and behavior. -N> When customizing the Save button, icons or text can be used based on design preference. +N> When customizing the Save button, you can use an icon, text, or both, depending on your design preference. [View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to) From f5d0b4f91b084490c28a8fe16562fa85ad0c30d3 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 14 Jul 2026 12:06:19 +0530 Subject: [PATCH 04/32] updated add-signature.md file --- .../PDF/PDF-Viewer/react/how-to/add-signature.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-signature.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-signature.md index de744c915a..62e1ef6e32 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/add-signature.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/add-signature.md @@ -1,7 +1,7 @@ --- layout: post -title: Add signature in React Pdfviewer component | Syncfusion -description: Learn here all about Add signature in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. +title: Add signature in React PDF Viewer component | Syncfusion +description: Learn how to programmatically add a signature to a signature field in the Syncfusion React PDF Viewer component. control: Add signature platform: document-processing documentation: ug From 02a1c8b8c678ebbd5f36c3284549f1fce3b70639 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 14 Jul 2026 12:26:34 +0530 Subject: [PATCH 05/32] updated annotation-selectors.md file --- .../PDF/PDF-Viewer/react/how-to/annotation-selectors.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/annotation-selectors.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/annotation-selectors.md index 5438f24f70..22ce7f9403 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/annotation-selectors.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/annotation-selectors.md @@ -5,13 +5,14 @@ description: Learn how to customize annotation selectors in the React PDF Viewer platform: document-processing control: PDF Viewer documentation: ug +domainurl: ##DomainURL## --- -# Customize annotation selectors in TypeScript PDF Viewer +# Customize annotation selectors in React PDF Viewer -Use the [annotationSelectorSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/#annotationselectorsettings) property to configure the appearance and behavior of annotation selectors. This includes selection handles and resizers (for example, handle shape and size), which determine how users interact with annotations during editing. +Use the [annotationSelectorSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationSelectorSettings) property to configure the appearance and behavior of annotation selectors. These include selection handles and resizers (for example, handle shape and size), which determine how users interact with annotations during editing. -The example below changes the selector's resizer handle shape to circular and opens an existing annotation for editing. Setting `resizerShape = 'Circle'` updates the selector appearance to circular resizer handles; ensure an annotation exists before calling `editAnnotation` to avoid runtime errors. +The example below changes the selector's resizer handle shape to circular and opens an existing annotation for editing. Setting `resizerShape` updates the selector appearance to circular handles. Ensure an annotation exists before calling `editAnnotation` to avoid runtime errors. ``` From 68d5722130fa30603deb9d50588d59df44121373 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 14 Jul 2026 12:43:06 +0530 Subject: [PATCH 06/32] updated authorization-token.md file --- .../PDF/PDF-Viewer/react/how-to/authorization-token.md | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/authorization-token.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/authorization-token.md index 19884dea9a..a7b78a0039 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/authorization-token.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/authorization-token.md @@ -1,11 +1,10 @@ --- layout: post -title: Authorization token in React Pdfviewer component | Syncfusion -description: Learn here all about Authorization token in Syncfusion React Pdfviewer component of Syncfusion Essential JS 2 and more. -control: Authorization token +title: Authorization token in React PDF Viewer component | Syncfusion +description: Learn how to include an authorization token in the React PDF Viewer component. +control: PDF Viewer platform: document-processing documentation: ug -domainurl: ##DomainURL## --- ## Authorization token in React PDF Viewer component From 7eb6a9e2f4c936ccaca535b12df02eca427bbca3 Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 14 Jul 2026 12:59:13 +0530 Subject: [PATCH 07/32] updated change-author-name-using-annotation-settings.md file --- ...change-author-name-using-annotation-settings.md | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/change-author-name-using-annotation-settings.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/change-author-name-using-annotation-settings.md index e7711d4014..5ade7b7509 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/change-author-name-using-annotation-settings.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/change-author-name-using-annotation-settings.md @@ -12,7 +12,7 @@ domainurl: ##DomainURL## The `annotationSettings` API provides a central way to configure properties that apply to all annotations in the viewer. -API name: annotationSettings +API: `annotationSettings` — see the [API reference](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotationsettingsmodel) for the full model. | Property Name | Data type & Default Value | Description | |---|---|---| @@ -27,7 +27,7 @@ API name: annotationSettings | Free Text Settings | | allowOnlyTextInput | Boolean (false) | Specifies text-only mode for free text annotations. If true, moving or resizing is disabled. | -Change the author name and other properties using the annotationSettings API as shown below. +Change the author name and other properties using the `annotationSettings` API as shown below. {% tabs %} {% highlight ts tabtitle="Standalone" %} @@ -55,4 +55,12 @@ viewer.freeTextSettings = { allowTextOnly : true }; viewer.appendTo("#pdfViewer"); {% endhighlight %} -{% endtabs %} \ No newline at end of file +{% endtabs %} + +## See also + +- [Annotation permissions in React](../annotation/annotation-permission) +- [Free text annotation](../annotation/annotation-types/free-text-annotation) +- [Customize annotation](../annotation/customize-annotation) +- [Annotations API](../annotation/annotations-api) +- [React PDF Viewer – Getting started](../getting-started) \ No newline at end of file From 3403e7f985045d7adc844dc4ecb215430bf54a3f Mon Sep 17 00:00:00 2001 From: Logeshwaran Saravanan Date: Tue, 14 Jul 2026 13:09:13 +0530 Subject: [PATCH 08/32] clear-annotation.md file --- .../PDF/PDF-Viewer/react/how-to/clear-annotation.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/react/how-to/clear-annotation.md b/Document-Processing/PDF/PDF-Viewer/react/how-to/clear-annotation.md index 151e617b0b..c328b98cb3 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/how-to/clear-annotation.md +++ b/Document-Processing/PDF/PDF-Viewer/react/how-to/clear-annotation.md @@ -28,14 +28,14 @@ function deleteAnnotations() { To remove a specific annotation, use the deleteAnnotationById method to target an annotation by its id. -Example: Delete a specific annotation by id +Example: Delete a specific annotation by ID ```html - +