Example: Highlight keywords programmatically

The Search plugin provides the Search component that can be used to create a custom search control.

In this example, we will use another functions to highlight given keywords and navigate between matches. The search plugin instance provides the following functions:

clearHighlightsClear the highlights2.4.0
highlightHighlight multiple keywords2.4.0
jumpToNextMatchJump to the next match2.4.0
jumpToPreviousMatchJump to the previous match2.4.0

The highlight function accepts a single or an array of keywords. Each keyword can be a string, RegExp or FlagKeyword.

The FlagKeyword type determines if we want to match the case or find the whole word:

// The `FlagKeyword` type is available from the import
// import { FlagKeyword } from '@react-pdf-viewer/search';

interface FlagKeyword {
    keyword: string;
    matchCase?: boolean;    // `false` by default
    wholeWords?: boolean;   // `false` by default

The following sample code highlights the document and PDF words, but the results have to match the case of PDF. So the PDF words are highlighted, but pdf words are not.

import { searchPlugin } from '@react-pdf-viewer/search';

const searchPluginInstance = searchPlugin();
const { highlight } = searchPluginInstance;

// Highlight keywords
        keyword: 'PDF',
        matchCase: true,

We can build the controls to turn on or off the matchCase and wholeWords properties.

In combination with the highlight, jumpToNextMatch and jumpToPreviousMatch methods, we can create a custom search control as following:

(The sample code)

Related examples