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..e6132d784d 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 +# Create Annotations from PDF Text Search Results -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" %} 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..473e8eac41 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. +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 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..45651ff298 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 @@ -1,6 +1,6 @@ --- layout: post -title: Add Save Button to Toolbar in React PDF Viewer +title: Add a Save Button to the Toolbar in Syncfusion React PDF Viewer description: Learn how to add, show, hide, enable, and disable a custom Save button in the built-in toolbar of the React PDF Viewer component. control: Toolbar platform: document-processing @@ -12,11 +12,11 @@ domainurl: ##DomainURL## PDF Viewer supports customizing toolbar items, including adding, showing, hiding, enabling, and disabling items. -* Save button: The Save button can be defined using [CustomToolbarItemModel](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/customToolbarItemModel/) and included alongside existing items via [ToolbarSettings](https://ej2.syncfusion.com//react/documentation/api/file-manager/toolbarSettings/). Handle the click action using [`toolbarclick`](https://ej2.syncfusion.com/react/documentation/api/file-manager/toolbarClickEventArgs/). +* Save button: The Save button can be defined using [CustomToolbarItemModel](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/customToolbarItemModel) and included alongside existing items via [ToolbarSettings](https://ej2.syncfusion.com//react/documentation/api/file-manager/toolbarSettings). Handle the click action using [`toolbarclick`](https://ej2.syncfusion.com/react/documentation/api/file-manager/toolbarClickEventArgs). -* Show or hide: The Save button can be shown or hidden using [ToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/file-manager/toolbarSettings/). Predefined items are listed under [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/chart/toolbarItems/). +* Show or hide: The Save button can be shown or hidden using [ToolbarSettings](https://ej2.syncfusion.com/react/documentation/api/file-manager/toolbarSettings). Predefined items are listed under [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/chart/toolbarItems). -* Enable or disable: The Save button can be enabled or disabled using [`enabletoolbaritem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar/). +* Enable or disable: The Save button can be enabled or disabled using [`enabletoolbaritem`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbar). {% tabs %} {% highlight js tabtitle="Standalone" %} @@ -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) 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..8dd14a3ff9 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 @@ -14,7 +14,7 @@ The PDF Viewer library allows adding a signature to a signature field in a loade Follow these steps -1. Follow the Syncfusion [getting-started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started/) guide for React PDF Viewer. +1. Follow the Syncfusion [getting-started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) guide for React PDF Viewer. 2. Add the following code snippet to handle signature field clicks and set or clear the signature value. {% tabs %} 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..549b3efec5 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 @@ -1,17 +1,18 @@ --- layout: post -title: Customize annotation selectors in React PDF Viewer +title: Customize Annotation Selectors in Syncfusion React PDF Viewer description: Learn how to customize annotation selectors in the React PDF Viewer component using annotationSelectorSettings with examples. platform: document-processing control: PDF Viewer documentation: ug +domainurl: ##DomainURL## --- -# Customize annotation selectors in TypeScript PDF Viewer +# Configure Annotation Selector Settings for Better User Interaction -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 resizer (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. ``` 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..f12d40518f 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,14 +1,13 @@ --- 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 securely pass an authorization token to the Syncfusion React PDF Viewer for authenticated document access and API requests. +control: PDF Viewer platform: document-processing documentation: ug -domainurl: ##DomainURL## --- -## Authorization token in React PDF Viewer component +# Authorization token in React PDF Viewer component This article shows how to include an authorization token in AJAX requests issued by the React PDF Viewer by using the `ajaxRequestSettings` property. The token is included in every AJAX request sent by the viewer when configured via `ajaxHeaders`. 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 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 - +