Scenario

In this example, users can toggle the PDF text layer with a button:

1. Enable text layer: Text remains selectable
2. Disable text layer: Text cannot be selected
3. The current state is displayed clearly so users know whether the selection is allowed

This is useful when you need to:

• Prevent accidental text selection in reading-focused flows
• Restrict copy behavior in certain UI modes
• Temporarily simplify interaction for custom overlays or annotations

What to Use

The textLayer prop from the RPProvider component allows you to control whether a text can be selected.

Name	Objective
RPProvider	Render the PDF document and control layer behavior
textLayer	Enable or disable the transparent text layer that powers text selection

After integrating the textLayer prop, you may use useState to add the component into the top bar of the React PDF Viewer instance.

Name	Objective
useState	Store and toggle between enabled or disabled text-layer states

JSX

import { useState } from "react";
import { RPProvider, RPPages, RPLayout, RPConfig } from "@react-pdf-kit/viewer";

// Component to toggle the text layer
const ToggleTextLayer = (props) => {
  const { isTextLayerEnabled, onToggleTextLayer } = props;
  const buttonLabel = isTextLayerEnabled
    ? "Disable Text Layer"
    : "Enable Text Layer";
  const statusLabel = isTextLayerEnabled ? "Enabled" : "Disabled";
  const statusHint = isTextLayerEnabled
    ? "(can select text)"
    : "(cannot select text)";
  const buttonColor = isTextLayerEnabled ? "red" : "green";
  const statusColor = isTextLayerEnabled ? "green" : "red";

  return (
    <div>
      {/* Button to toggle the text layer */}
      <button
        onClick={onToggleTextLayer}
        style={{
          padding: "8px",
          marginBottom: "10px",
          backgroundColor: buttonColor,
          color: "white",
          borderRadius: "5px",
          cursor: "pointer",
        }}
      >
        {buttonLabel}
      </button>

      {/* Display the current text layer status */}
      <div style={{ marginBottom: "10px" }}>
        <span style={{ fontWeight: "bold" }}>Current Text Layer: </span>
        <span
          style={{
            fontWeight: "bold",
            backgroundColor: statusColor,
            padding: "4px",
            borderRadius: "5px",
            color: "white",
          }}
        >
          {statusLabel}
        </span>{" "}
        <span>{statusHint}</span>
      </div>
    </div>
  );
};

const AppPdfViewer = () => {
  const [isTextLayerEnabled, setIsTextLayerEnabled] = useState(true);

  return (
    <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
      {/* The textLayer prop can be enabled or disabled, default is enabled */}
      <RPProvider textLayer={isTextLayerEnabled} src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
        <ToggleTextLayer
          isTextLayerEnabled={isTextLayerEnabled}
          onToggleTextLayer={() => setIsTextLayerEnabled((current) => !current)}
        />
        <RPLayout toolbar>
          <RPPages />
        </RPLayout>
      </RPProvider>
    </RPConfig>
  );
};

export default AppPdfViewer;

TSX

import { useState } from "react";
import { RPProvider, RPPages, RPLayout, RPConfig } from "@react-pdf-kit/viewer";

// Props for the ToggleTextLayer component
interface ToggleTextLayerProps {
  isTextLayerEnabled: boolean;
  onToggleTextLayer: () => void;
}

// Component to toggle the text layer
const ToggleTextLayer = (props: ToggleTextLayerProps) => {
  const { isTextLayerEnabled, onToggleTextLayer } = props;
  const buttonLabel = isTextLayerEnabled
    ? "Disable Text Layer"
    : "Enable Text Layer";
  const statusLabel = isTextLayerEnabled ? "Enabled" : "Disabled";
  const statusHint = isTextLayerEnabled
    ? "(can select text)"
    : "(cannot select text)";
  const buttonColor = isTextLayerEnabled ? "red" : "green";
  const statusColor = isTextLayerEnabled ? "green" : "red";

  return (
    <div>
      {/* Button to toggle the text layer */}
      <button
        onClick={onToggleTextLayer}
        style={{
          padding: "8px",
          marginBottom: "10px",
          backgroundColor: buttonColor,
          color: "white",
          borderRadius: "5px",
          cursor: "pointer",
        }}
      >
        {buttonLabel}
      </button>

      {/* Display the current text layer status */}
      <div style={{ marginBottom: "10px" }}>
        <span style={{ fontWeight: "bold" }}>Current Text Layer: </span>
        <span
          style={{
            fontWeight: "bold",
            backgroundColor: statusColor,
            padding: "4px",
            borderRadius: "5px",
            color: "white",
          }}
        >
          {statusLabel}
        </span>{" "}
        <span>{statusHint}</span>
      </div>
    </div>
  );
};

const AppPdfViewer = () => {
  const [isTextLayerEnabled, setIsTextLayerEnabled] = useState(true);

  return (
    <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
      {/* The textLayer prop can be enabled or disabled, default is enabled */}
      <RPProvider textLayer={isTextLayerEnabled} src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
        <ToggleTextLayer
          isTextLayerEnabled={isTextLayerEnabled}
          onToggleTextLayer={() => setIsTextLayerEnabled((current) => !current)}
        />
        <RPLayout toolbar>
          <RPPages />
        </RPLayout>
      </RPProvider>
    </RPConfig>
  );
};

export default AppPdfViewer;

Notes:

• The textLayer prop is true by default, so text selection is enabled unless you explicitly disable it
• Setting textLayer={false} disables text selection in the PDF page area
• Disabling textLayer also affects features that rely on the text layer For example, in-viewer text search and keyword highlight
• Keep the toggle state visible in the UI so users understand why they can or cannot select text