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:
`highlightEle``HTMLElement`The highlighted element2.4.0
`keyword``RegExp`The 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) => { = '2px dashed blue'; = '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