Syncfusion AI Assistant

How can I help you?

Enable or disable text selection in React PDF Viewer

23 Mar 20266 minutes to read

This guide explains how to enable or disable text selection in the Syncfusion 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 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

    The enableTextSelection property can also be used to toggle the text selection at runtime.

    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: Provide a cleaner viewing experience by preventing selection.
    • 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