Enable or disable text selection in React PDF Viewer

14 Jul 20266 minutes to read

This guide explains how to enable or disable text selection in the React PDF Viewer using both initialization-time settings and runtime toggling.

Outcome: By the end of this guide, you will be able to control whether users can select text in the PDF Viewer.

Steps to toggle text selection

1. Disable text selection at initialization

Follow one of these steps to disable text selection when the viewer first loads:

Remove the text selection module

Remove the TextSelection module in the services array to disable text selection during initialization.

  • TS
    • <PdfViewerComponent
    id="PdfViewer"
    ref={viewerRef}
    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
    style={{ height: '100%' }}
>
    <Inject
        services={[
            Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
            ThumbnailView, Print, TextSearch, FormFields, FormDesigner, PageOrganizer
        ]}
    />
</PdfViewerComponent>

    Set enableTextSelection to false

    Use the enableTextSelection property (boolean, default true) during initialization to disable or enable text selection. The following example disables the text selection during initialization.

  • TS
    • <PdfViewerComponent
    id="PdfViewer"
    ref={viewerRef}
    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
    style={{ height: '100%' }}
    enableTextSelection={false}
>
    <Inject
        services={[
            Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
            ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
        ]}
    />
</PdfViewerComponent>

    2. Toggle text selection at runtime

    Ensure the TextSelection module is included in the Inject services array so the property is available at runtime.

    The enableTextSelection property can also be used to toggle the text selection at runtime. Click the corresponding button to switch the selection state while the PDF is loaded.

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

export default function App() {
    const viewerRef: RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    const enableTextSelection = () => {
        if (viewerRef.current) {
            viewerRef.current.enableTextSelection = true;
        }
    }
    const disableTextSelection = () => {
        if (viewerRef.current) {
            viewerRef.current.enableTextSelection = false;
        }
    }
    return (
        <div style={{ height: '100vh' }}>
            <button onClick={enableTextSelection}>Enable Text Selection</button>
            <button onClick={disableTextSelection}>Disable Text Selection</button>
            <PdfViewerComponent
                id="PdfViewer"
                ref={viewerRef}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
                style={{ height: '100%' }}
            >
                <Inject
                    services={[
                        Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
                        ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

    NOTE

    When text selection is disabled, the viewer automatically switches to pan mode.

    View sample in GitHub

    Use cases and considerations

    • Document protection: Disable text selection to help prevent copying sensitive content.
    • Read-only documents: Prevent selection for a cleaner viewing experience.
    • Interactive apps: Toggle selection based on user roles or document states.

    NOTE

    Text selection is enabled by default. Set enableTextSelection to false to disable it.

    Troubleshooting

    If text selection remains active, ensure that the TextSelection is removed in Inject or enableTextSelection is set to false.

    See also