The useSelectionModeContext hook provides access to the selection mode state and a setter function for controlling how the user interacts with PDF content within React PDF Kit.

It enables you to switch between text selection mode and hand (pan/scroll) mode, or create custom UI elements that toggle the selection mode.

Return Type

Name	Type	Description
selectionMode	SelectionMode	The current selection mode
setSelectionMode	(mode: SelectionMode) => void	Set the selection mode

Usage

To ensure the selection mode context can be accessed, you will need to use useSelectionModeContext inside a component which is a child of RPProvider.

This example shows how to create a CustomSelectionMode component which uses useSelectionModeContext to read and toggle the selection mode.

JSX

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

const CustomSelectionMode = () => {
  const { selectionMode, setSelectionMode } = useSelectionModeContext();

  return (
    <div>
      <div>selectionMode: {selectionMode}</div>
      <button
        onClick={() =>
          setSelectionMode(
            selectionMode === SelectionMode.TEXT
              ? SelectionMode.HAND
              : SelectionMode.TEXT
          )
        }
      >
        Toggle selection mode
      </button>
    </div>
  );
};

export const AppPdfViewer = () => {
  return (
    <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
      <RPProvider src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
        <CustomSelectionMode />
        <RPLayout toolbar>
          <RPPages />
        </RPLayout>
      </RPProvider>
    </RPConfig>
  );
};

TSX

import React, { FC } from "react";
import {
  RPConfig,
  RPProvider,
  RPLayout,
  RPPages,
  useSelectionModeContext,
  SelectionMode,
} from "@react-pdf-kit/viewer";

const CustomSelectionMode: FC = () => {
  const { selectionMode, setSelectionMode } = useSelectionModeContext();

  return (
    <div>
      <div>selectionMode: {selectionMode}</div>
      <button
        onClick={() =>
          setSelectionMode(
            selectionMode === SelectionMode.TEXT
              ? SelectionMode.HAND
              : SelectionMode.TEXT
          )
        }
      >
        Toggle selection mode
      </button>
    </div>
  );
};

export const AppPdfViewer: FC = () => {
  return (
    <RPConfig licenseKey="YOUR_DOMAIN_TOKEN">
      <RPProvider src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf">
        <CustomSelectionMode />
        <RPLayout toolbar>
          <RPPages />
        </RPLayout>
      </RPProvider>
    </RPConfig>
  );
};