Customize the redaction toolbar in React PDF Viewer

24 Jun 20267 minutes to read

This guide shows how to enable and control the redaction toolbar in the React PDF Viewer, including showing/hiding it from the primary toolbar programmatically.

Outcome: a working viewer with the Redaction toolbar available and code to toggle it.

Prerequisites

  • EJ2 React PDF Viewer installed and imported. See getting started guide
  • A public PDF or service endpoint (the examples use a CDN-hosted PDF and the Syncfusion resource URL).

Steps

Enable redaction toolbar

Enable the redaction toolbar by adding RedactionEditTool to toolbarSettings.toolbarItems.

Example code:

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

export default function App() {
    const toolbarSettings = {
        toolbarItems: [
            'OpenOption', 'UndoRedoTool', 'PageNavigationTool', 'MagnificationTool',
            'PanTool', 'SelectionTool', 'CommentTool', 'SubmitForm', 'AnnotationEditTool',
            'RedactionEditTool', 'FormDesignerEditTool', 'SearchOption', 'PrintOption', 'DownloadOption'
        ] as ToolbarItem[]
    };

    return (
        <div style={{ height: '680px' }}>
            <PdfViewerComponent
                id="container"
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.5/dist/ej2-pdfviewer-lib"
                toolbarSettings={toolbarSettings}
            >
                <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
            </PdfViewerComponent>
        </div>
    );
}

Expected result: the primary toolbar contains the Redaction icon. Clicking it opens the redaction toolbar.

Toggle redaction toolbar

  • Toggle the redaction toolbar using the primary toolbar icon.

    • When RedactionEditTool is included, the viewer shows a redaction icon. Clicking it toggles the redaction toolbar without additional code.

  • Show or hide the redaction toolbar programmatically.

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

export default function App() {
    const viewerRef = React.useRef(null);

    const toolbarSettings = {
        toolbarItems: [
            'OpenOption', 'UndoRedoTool', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'CommentTool', 'SubmitForm', 'AnnotationEditTool', 'RedactionEditTool', 'FormDesignerEditTool', 'SearchOption', 'PrintOption', 'DownloadOption'
        ] as ToolbarItem[]
    };

    const showRedactionToolbar = () => viewerRef.current && viewerRef.current.toolbar.showRedactionToolbar(true);
    const hideRedactionToolbar = () => viewerRef.current && viewerRef.current.toolbar.showRedactionToolbar(false);

    return (
        <div>
            <div style={{ margin: '8px 0', display: 'flex', gap: '8px' }}>
                <button type='button' onClick={showRedactionToolbar}>Show Redaction Toolbar</button>
                <button type='button' onClick={hideRedactionToolbar}>Hide Redaction Toolbar</button>
            </div>
            <PdfViewerComponent
                ref={viewerRef}
                id='container'
                resourceUrl='https://cdn.syncfusion.com/ej2/32.2.5/dist/ej2-pdfviewer-lib'
                documentPath='https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
                toolbarSettings={toolbarSettings}
                style={{ height: '640px' }}
            >
                <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
            </PdfViewerComponent>
        </div>
    );
}

Expected result: the two buttons above the viewer show and hide the redaction toolbar on demand.

Troubleshooting

  • If redaction icon not visible, ensure if 'RedactionEditTool' is added to toolbarSettings.toolbarItems and Toolbar is included in <Inject services=[...] />.

  • If toolbar buttons have no effect, verify resourceUrl points to a reachable ej2-pdfviewer-lib bundle appropriate for your viewer version.

  • If viewer fails to load PDF, use a public PDF URL or configure a server-side service endpoint.