How to Add a Custom Toolbar to the React PDF Viewer Component

See how to add a custom toolbar to the Syncfusion React PDF Viewer component. In this video, I will demonstrate how to load a PDF file from a local path and add page navigation, zooming, text search, printing, and download functions to a custom toolbar in the React PDF Viewer.

The React PDF Viewer is a lightweight and modular component for viewing and printing PDF files. It provides the best viewing experience available with interactive functions such as such as scrolling, zooming, panning, and page navigation. Users can select text in a PDF document and copy it to the clipboard to share the content with others.

Locate all occurrences of specific text and navigate through them easily. Use a rich set of annotation tools for highlighting the text; adding shapes, text, and stamps; and drawing with ink. The thumbnail, bookmark, hyperlink, and table of contents support provides easy navigation within and outside the PDF files. Fill data in the form fields and design personalized forms by adding new form fields. Users can print an entire document or a specific page directly from the browser.

The PDF Viewer provides APIs for user interaction options in its built-in toolbar. Using them, developers can create their own user interface for toolbar actions at the application level by hiding the default toolbar.

Tutorial video: https://www.syncfusion.com/tutorial-videos

Download example from GitHub: https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/Custom%20Toolbar

TRIAL LICENSE KEY
------------
If you need a trial license key, start a React trial from your Syncfusion account and then obtain a trial license key from the downloads page: https://www.syncfusion.com/account/manage-trials/start-trials

Check if you are eligible for a free license for all Essential Studio products on our Community License page: https://www.syncfusion.com/products/communitylicense

BOOKMARK DETAILS
--------------
[00:00] Introduction
[01:27] Hide built-in toolbar
[02:12] Design custom toolbar using Syncfusion Toolbar component
[02:26] Add file open module
[06:14] Add navigation module
[08:35] Add magnification module
[10:15] Add separators using Syncfusion Toolbar component
[10:44] Add text selection module
[11:50] Add text search module
[15:15] Add print and download items

REACT PDF VIEWER
------------------
Product overview: https://www.syncfusion.com/react-components/react-pdf-viewer
Examples: https://ej2.syncfusion.com/react/demos/#/material/pdfviewer/default
Documentation: https://ej2.syncfusion.com/react/documentation/pdfviewer/getting-started
Download free trial: https://www.syncfusion.com/downloads/react/confirm
NuGet package: https://www.npmjs.com/package/@syncfusion/ej2-react-pdfviewer

SUBSCRIBE
---------
Syncfusion on YouTube: http://bit.ly/syncfusionyoutube
Sign up to receive email updates: http://bit.ly/syncfusionemail

SOCIAL COMMUNITY
--------------------
Facebook: https://www.facebook.com/Syncfusion/
Twitter: https://twitter.com/Syncfusion
LinkedIn: https://www.linkedin.com/company/syncfusion/
Instagram: http://instagram.com/syncfusion 

#react #pdfviewer #pdf

Видео How to Add a Custom Toolbar to the React PDF Viewer Component канала Syncfusion, Inc