Customize the Primary Toolbar in React PDF Viewer

23 Jul 20267 minutes to read

Overview

This guide explains how to show or hide the primary toolbar, remove default items, and add custom toolbar items.

Outcome: Working React example customizing the primary toolbar.

Prerequisites

Steps

1. Show or hide primary toolbar at initialization

Set enableToolbar to false to hide the built-in toolbar.

import React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';

export default function App() {
    return (
        <PdfViewerComponent
            id="pdfViewer"
            enableToolbar={false}
            documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
            resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
            style={{ height: '500px' }}>
            <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner]} />
        </PdfViewerComponent>
    );
}

2. Show or hide primary toolbar at runtime

Use the viewer’s showToolbar() method to show or hide dynamically.

// with a ref named pdfviewer
pdfviewer.toolbar.showToolbar(false);

3. Show or hide primary toolbar items

Provide the toolbarItems array with the exact set and order of items you want to show. Any item omitted is hidden.

  • TS
    • <PdfViewerComponent
    toolbarSettings={{
    toolbarItems: ['OpenOption', 'DownloadOption', 'PrintOption', 'MagnificationTool']
    }}
/>

    4. Add a custom primary toolbar item

    Add a custom item by including an object in toolbarItems and handling its action via toolbarClick. The following example shows adding a simple custom button at initialization and wiring its toolbarClick handler.

  • TS
    • const customItems: (CustomToolbarItem | ToolbarItem)[] = [
    'OpenOption',
    {
        id: 'custom_btn',
        text: 'Fit to Width',
        align: 'Center'
    } as CustomToolbarItem,
    'DownloadOption'
];
<PdfViewerComponent toolbarSettings={{ toolbarItems: customItems }} />

    Complete example:

    import { useRef, RefObject, useState } from 'react';
import { PdfViewerComponent, Toolbar, Inject, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSearch, TextSelection, FormFields, FormDesigner, PageOrganizer, CustomToolbarItem, ToolbarItem } from '@syncfusion/ej2-react-pdfviewer';
import { ClickEventArgs } from '@syncfusion/ej2-react-navigations';

export function App() {
    const pdfviewerRef: RefObject<PdfViewerComponent> = useRef<any>(null);
    const buttonRef: RefObject<HTMLButtonElement> = useRef<any>(null);
    const [showTool, setShowTool] = useState<boolean>(false);
    const handler = () => {
        const temp: boolean = showTool;
        pdfviewerRef.current?.toolbar.showToolbar(temp);
        setShowTool(!temp);
    }
    const handleToolbarClick = (event: ClickEventArgs) => {
        if (event.item.id === 'custom_btn') {
            handleFitToWidth();
        }
    }
    const handleFitToWidth = () => pdfviewerRef.current?.magnification.fitToWidth();
    const toolbarItems: (CustomToolbarItem | ToolbarItem)[] = [
        'OpenOption',
        {
            id: 'custom_btn',
            text: 'Fit to Width',
            align: 'Center'
        } as CustomToolbarItem,
        'DownloadOption'
    ];
    return (
        <div>
            <button id="set" ref={buttonRef} onClick={() => handler()}>Hide toolbar</button>
            <PdfViewerComponent
                id="PdfViewer"
                ref={pdfviewerRef}
                enableNavigationToolbar={false}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
                toolbarSettings={{ toolbarItems: toolbarItems }}
                toolbarClick={handleToolbarClick}
                style={{ height: '500px' }}>
                <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
                    BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer]} />
            </PdfViewerComponent>
        </div>
    );
}

    Expected result

    • The primary toolbar shows only the items you list in toolbarItems.
    • Clicking Hide toolbar calls showToolbar(false) and hides or shows the toolbar at runtime.

    Troubleshooting

    • Toolbar still shows all default items.
      • Solution: toolbarItems must be supplied exactly; verify names and that Toolbar service is injected.