Example: Add custom styles to the highlighted elements

By default, the Search plugin adds the CSS class rpv-search-text-highlight to each highlighted element when users search for given keyword.

You can add more styles to that CSS class:

.rpv-search-text-highlight {
    outline: 1px dashed blue;
}

There is another way which uses the onHighlightKeyword callback. The callback will be invoked after a given keyword is highlighted. It is a function that takes an OnHighlightKeyword parameter.

OnHighlightKeyword provides the following properties:

Property	Type	Description	From
`highlightEle`	`HTMLElement`	The highlighted element	2.4.0
`keyword`	`RegExp`	The current keyword	2.4.0

The following sample code adds an outline and changes the background color of the highlighted element:

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

const searchPluginInstance = searchPlugin({
    onHighlightKeyword: (props: OnHighlightKeyword) => {
        props.highlightEle.style.outline = '1px dashed blue';
        props.highlightEle.style.backgroundColor = 'rgba(0, 0, 0, .1)';
    },
});

If you are using the Default Layout plugin, then the onHighlightKeyword option can be used as below:

import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import { OnHighlightKeyword } from '@react-pdf-viewer/search';

const defaultLayoutPluginInstance = defaultLayoutPlugin({
    toolbarPlugin: {
        searchPlugin: {
            onHighlightKeyword: (props: OnHighlightKeyword) => {
                // ...
            },
        }
    }
});

Scroll to see how the document words are added custom styles (The sample code)

Example: Add custom styles to the highlighted elements

Related examples