HelpBot Assistant

How can I help you?

Customize Primary Toolbar in React PDF Viewer

4 Mar 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.

  • 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.