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)