React PDF viewer
v1.6.0

Example: Disable text selection

This post will introduce two ways to prevent user from selecting the text in any page. Both of them need to change the way each page is rendered.

Use the user-select style

By default, each page is constructed by canvas, text, and annotation layers. In order to disable the text selection, we can wrap the text layer in a layer that uses the CSS property user-select: none:

import Viewer, { RenderPageProps } from '@phuocng/react-pdf-viewer';

const renderPage = (props: RenderPageProps) => {
    return (
        <>
            {props.canvasLayer.children}
            <div style={{ userSelect: 'none' }}>
                {props.textLayer.children}
            </div>
            {props.annotationLayer.children}
        </>
    );
};

<Viewer
    fileUrl="/path/to/document.pdf"
    renderPage={renderPage}
/>

It's worth noting that even the text selection is disabled, user can still copy the text by

  • downloading the entire document from the toolbar
  • or inspecting the text and copying them via the browser's Developer Tools

(The sample code)

/ 8
90%

Remove the text layer

The approach above uses a CSS property to prevent users from selecting text. But the text are still there.

You can take it further by removing the text layer completely. The renderPage function now doesn't include the text layer anymore:

import Viewer, { RenderPageProps } from '@phuocng/react-pdf-viewer';

const renderPage = (props: RenderPageProps) => {
    return (
        <>
            {props.canvasLayer.children}
            {props.annotationLayer.children}
        </>
    );
};

<Viewer
    fileUrl="/path/to/document.pdf"
    renderPage={renderPage}
/>

The search functionality will not work because it isn't possible to look for text in all pages. So, we have to remove the search and download buttons from the toolbar.

You should take a look at this example to see how we can customize the toolbar.

import Viewer, {
    defaultLayout,
    RenderToolbar,
    Slot,
    ToolbarSlot,
} from '@phuocng/react-pdf-viewer';

const renderToolbar = (toolbarSlot: ToolbarSlot): React.ReactElement => {
    return (
        <div
            style={{
                alignItems: 'center',
                display: 'flex',
                justifyContent: 'space-between',
                width: '100%',
            }}
        >
            <div
                style={{
                    alignItems: 'center',
                    display: 'flex',
                    justifyContent: 'center',
                }}
            >
                /* The search button is removed from the left side */
                <div style={{ padding: '0 2px' }}>
                    {toolbarSlot.toggleSidebarButton}
                </div>
                ...
            </div>
            <div
                style={{
                    alignItems: 'center',
                    display: 'flex',
                    justifyContent: 'center',
                }}
            >
                ...
            </div>
            <div
                style={{
                    alignItems: 'center',
                    display: 'flex',
                    justifyContent: 'center',
                }}
            >
                /* The download button is removed from the left side */
                <div style={{ padding: '0 2px' }}>
                    {toolbarSlot.fullScreenButton}
                </div>
                ...
            </div>
        </div>
    );
};

const layout = (
    isSidebarOpened: boolean,
    container: Slot,
    main: Slot,
    toolbar: RenderToolbar,
    sidebar: Slot,
): React.ReactElement => {
    return defaultLayout(
        isSidebarOpened,
        container,
        main,
        toolbar(renderToolbar),
        sidebar,
    );
};

return (
    <Viewer
        fileUrl={fileUrl}
        layout={layout}
    />
);

(The sample code)

/ 8
90%