DEV Community

Cover image for How to Add a Custom Toolbar with Annotations and Form Fields to the React PDF Viewer component
Arun for Syncfusion, Inc.

Posted on

How to Add a Custom Toolbar with Annotations and Form Fields to the React PDF Viewer component

See how to add a custom toolbar with annotations and form fields to the React PDF Viewer component using the Syncfusion React PDF Viewer.

The React PDF Viewer is a lightweight, modular component for viewing and printing PDF files. It provides the best viewing experience possible with interactive functions such as such as scrolling, zooming, panning, and page navigation.

You can select text in a PDF document and copy it to the clipboard to share it with others. Locate all occurrences of specific text and navigate through them easily. Use a rich set of annotation tools for highlighting text; adding shapes, text, and stamps; and drawing with ink.

Support for thumbnails, bookmarks, hyperlinks, and table of contents provides easy navigation within and outside PDF files. Fill in 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 the 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.

Product overview: https://www.syncfusion.com/react-components/react-pdf-viewer

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

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

Top comments (0)