Docs
Plugins
Localizations
Examples
Updates
Purchase

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:
MethodDescriptionFrom
`clearHighlights`Clear the highlights2.4.0
`highlight`Highlight multiple keywords2.4.0
`jumpToNextMatch`Jump to the next match2.4.0
`jumpToPreviousMatch`Jump 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
highlight([
    'document',
    {
        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)

See also