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:
PropertyTypeDescriptionFrom
highlightEleHTMLElementThe highlighted element2.4.0
keywordRegExpThe current keyword2.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)

See also

;