Customize the Annotation Toolbar in React PDF Viewer

23 Jul 20266 minutes to read

Overview

This guide shows how to show or hide the annotation toolbar and how to choose which tools appear and their order.

Outcome: A working React example that toggles the annotation toolbar and uses annotationToolbarItems to customize the toolbar.

Prerequisites

Steps

1. Show or hide the annotation toolbar

Use the showAnnotationToolbar method on the viewer toolbar to control visibility.

const viewer: RefObject<PdfViewerComponent> = useRef(null);
const [show, setShow] = useState(true);
const hideToolbar = () => {
    viewer.current.toolbar.showAnnotationToolbar(show);
    setShow(!show);
};
return (
    <div>
        <button onClick={hideToolbar}>Hide Annotation Toolbar</button>
        <PdfViewerComponent
            id="PdfViewer"
            ref={viewer}
            documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
            resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
            height="600px"
            width="100%" >
            <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
                BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]} />
        </PdfViewerComponent>
    </div>
);

2. Show or hide annotation toolbar items

Use annotationToolbarItems with a list of AnnotationToolbarItem values. The toolbar shows only items in this list.

const annotationToolbarItems: AnnotationToolbarItem[] = [
    'HighlightTool', 'UnderlineTool', 'StrikethroughTool', 'ColorEditTool', 'OpacityEditTool', 'AnnotationDeleteTool', 'CommentPanelTool'
];
<PdfViewerComponent
    id="PdfViewer"
    ref={viewer}
    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
    toolbarSettings={{ annotationToolbarItems }}
    width="100%" >
    <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
        BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]} />
</PdfViewerComponent>

Complete example

The following is a complete, runnable example. It wires a toggle button and a viewer with a custom annotation toolbar list.

import { useRef, RefObject, useState } from 'react';
import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
    ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
    AnnotationToolbarItem, PageOrganizer, Inject
} from '@syncfusion/ej2-react-pdfviewer';
const annotationToolbarItems: AnnotationToolbarItem[] = [
    'HighlightTool', 'UnderlineTool', 'StrikethroughTool', 'ColorEditTool', 'OpacityEditTool', 'AnnotationDeleteTool', 'CommentPanelTool'
];
export default function App() {
    const viewer: RefObject<PdfViewerComponent> = useRef(null);
    const [show, setShow] = useState(true);
    const hideToolbar = () => {
        viewer.current.toolbar.showAnnotationToolbar(show);
        setShow(!show);
    };
    return (
        <div>
            <button onClick={hideToolbar}>Hide Annotation Toolbar</button>
            <PdfViewerComponent
                id="PdfViewer"
                ref={viewer}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
                toolbarSettings={{ annotationToolbarItems }}
                height="600px"
                width="100%" >
                <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
                    BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]} />
            </PdfViewerComponent>
        </div>
    );
};

Troubleshooting