Selection Plugin

The Selection Plugin enables users to select text within the PDF document, just like on a standard webpage. It provides the <SelectionLayer /> to visually highlight the selected text and a rich API to get the selected content.

Installation

This plugin depends on the Interaction Manager plugin. You must install both packages.

npm install @embedpdf/plugin-selection @embedpdf/plugin-interaction-manager

pnpm add @embedpdf/plugin-selection @embedpdf/plugin-interaction-manager

yarn add @embedpdf/plugin-selection @embedpdf/plugin-interaction-manager

bun add @embedpdf/plugin-selection @embedpdf/plugin-interaction-manager

Registration

Import SelectionPluginPackage and its InteractionManager dependency, and add them to the plugins array. The Selection plugin should be registered after its dependency.

import { createPluginRegistration } from '@embedpdf/core'
import { EmbedPDF } from '@embedpdf/core/react'
// ... other imports
import { InteractionManagerPluginPackage } from '@embedpdf/plugin-interaction-manager/react'
import { SelectionPluginPackage } from '@embedpdf/plugin-selection/react'
 
const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, { /* ... */ }),
 
  // Register dependency first
  createPluginRegistration(InteractionManagerPluginPackage),
 
  // Register the selection plugin
  createPluginRegistration(SelectionPluginPackage),
]

Usage

The plugin has two main parts: the <SelectionLayer /> component for the UI, and the useSelectionCapability hook for interacting with the selection data.

1. Displaying the Selection

To show the highlighted text, place the <SelectionLayer /> component inside the renderPage prop of your <Scroller />. For text selection to work correctly, it must be a child of the PagePointerProvider.

import { PagePointerProvider } from '@embedpdf/plugin-interaction-manager/react';
import { SelectionLayer } from '@embedpdf/plugin-selection/react';
 
// ...
<Scroller
  renderPage={({ width, height, pageIndex, scale, rotation }) => (
    <PagePointerProvider {...{ width, height, pageIndex, scale, rotation }}>
      <RenderLayer pageIndex={pageIndex} scale={scale} />
      <SelectionLayer pageIndex={pageIndex} scale={scale} />
    </PagePointerProvider>
  )}
/>

2. Interacting with the Selection

The useSelectionCapability hook allows you to work with the selected text. You can create a toolbar to copy the text or perform other actions. The plugin automatically handles the clipboard logic when you call provides.copyToClipboard().

You can use the onSelectionChange event to know when a selection exists, which is useful for enabling or disabling UI elements like a “Copy” button.

import { useState, useEffect } from 'react';
import { useSelectionCapability, SelectionRangeX } from '@embedpdf/plugin-selection/react';
 
const SelectionToolbar = () => {
  const { provides: selection } = useSelectionCapability();
  const [hasSelection, setHasSelection] = useState(false);
 
  useEffect(() => {
    if (!selection) return;
    return selection.onSelectionChange((sel: SelectionRangeX | null) => {
      setHasSelection(!!sel);
    });
  }, [selection]);
 
  return <button onClick={() => selection?.copyToClipboard()} disabled={!hasSelection}>Copy</button>;
};

Live Example

Try selecting text in the viewer below. A “Copy Text” button will become active, allowing you to copy the selected content to your clipboard.

API Reference

Component: <SelectionLayer />

The component that renders the blue rectangles over the selected text.

Hook: useSelectionCapability()

Connects your component to the selection plugin’s state and functions.

Returns

SelectionCapability Methods