Add custom styles to the highlighted elements

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

You can add more styles to that CSS class:

.rpv-search__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 = '2px 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)

Add custom styles to the highlighted elements

See also