Search

Find text across the whole document, highlight every match, and step through results from the keyboard.

Basics

search adds a find bar that searches every page and highlights the matches.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { // Type in the search field (or press Ctrl/⌘ + F inside the viewer); Enter steps through matches. return <PdfViewer source="/samples/multipage.pdf" search />; }

Matching is case-insensitive. Enter and Shift + Enter step to the next and previous match, moving to its page and scrolling it into view; Esc clears the field. With focus inside the viewer, Ctrl/⌘ + F focuses the search field. The result count (“2 of 5”) is announced as it changes. search implies the text layer.

With continuous layout

In continuous layout, stepping through matches scrolls the document to each one.

import { PdfViewer } from '@kingtech/react-pdf-viewer'; export default function Demo() { return <PdfViewer source="/samples/multipage.pdf" search layout="continuous" thumbnails />; }

Customization

Highlight colors and the search bar surface are CSS variables; the field’s name and result texts are labels.

import { PdfViewer, type PdfViewerLabels } from '@kingtech/react-pdf-viewer'; import type { CSSProperties } from 'react'; const labels: Partial<PdfViewerLabels> = { search: 'Find in report', searchResults: (current, total) => `${current}/${total}`, searchNoResults: 'Nothing found', }; const style = { '--rpv-search-highlight': 'rgba(56, 189, 248, 0.45)', '--rpv-search-highlight-selected': 'rgba(37, 99, 235, 0.6)', '--rpv-search-bg': '#f8fafc', } as CSSProperties; export default function Demo() { return <PdfViewer source="/samples/multipage.pdf" search labels={labels} style={style} />; }

See --rpv-search-highlight, --rpv-search-highlight-selected, --rpv-search-bg and --rpv-search-fg in the CSS variables reference and the customization guide.

Advanced / escape hatch

PdfPageCanvas accepts a highlight ({ query, selected }, see PageHighlight) and reports the selected match’s element through onHighlight, so a custom UI can drive search itself.

Limitations

Plain text matching. No regular expressions, whole-word or case-sensitive options. Workaround: extract text with getDocument() and PDF.js getTextContent(), search it yourself, and highlight with PdfPageCanvas.
Text split across lines is not matched as one phrase. A phrase broken by a line or column break may not be found. Workaround: search for a shorter part of the phrase.
Scanned pages cannot be searched. Image-only pages contain no text; see Text layer.

API

PageHighlight — Search highlighting for one page's text layer: the query to mark, and which of the page's matches is the selected one.
PdfViewerProps — Props for PdfViewer. Every piece of state supports the value / defaultValue / onChange trio.