Customize the search highlighted elements

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

You can add more custom styles to highlight elements by using the `onHighlightKeyword` option:

const searchPluginInstance = searchPlugin({
    onHighlightKeyword: (props: OnHighlightKeyword) => {
        // `props.highlightEle` returns the highlight element
    },
});

See the Add custom styles to the highlighted elements example for more details.

However, there are many cases where you want to add more interactions with the highlighted elements. This example demonstrates one of them. In this example, when users hover on each highlighted element, we will show a tooltip indicating that there is more information about it.

In order to render your own highlighted elements, you can use the `renderHighlights` option:

const searchPluginInstance = searchPlugin({
    renderHighlights: (renderProps: RenderHighlightsProps) => (
        // Your custom highlighted elements
    ),
});

The `renderProps` parameter consists of the following properties:

Property	Type	Description	From
`getCssProperties`	`Function`	Returns the CSS properties needed for each highlighted element. It indicates the absolute position of highlighted elements	3.5.0
`highlightAreas`	`HighlightArea[]`	List of highlighted area	3.5.0

Our `renderHighlights` looks like:

const renderHighlights = React.useCallback(
    (renderProps: RenderHighlightsProps) => (
        <>
            {renderProps.highlightAreas.map((area, index) => (
                <div
                    key={`${area.pageIndex}-${index}`}
                    style={{
                        ...renderProps.getCssProperties(area),
                        position: 'absolute',
                    }}
                >
                    {/* The content of highlighted element */}
                </div>
            ))}
        </>
    ),
    []
);

Each highlighted area, `HighlightArea`, provides the following properties:

Property	Type	Description	From
`keyword`	`RegExp`	The regular expression represents the current keyword	3.5.0
`keywordStr`	`string`	The current keyword	3.5.0
`numPages`	`number`	The total number of pages of the document	3.5.0
`pageIndex`	`number`	The zero-based page index where the highlighted are belongs to	3.5.0
`left`	`number`	The left position of the highlighted element	3.5.0
`top`	`number`	The top position of the highlighted element	3.5.0
`height`	`number`	The height of the highlighted element	3.5.0
`width`	`number`	The width of the highlighted element	3.5.0
`pageHeight`	`number`	The height of the page containing the highlighted element	3.5.0
`pageWidth`	`number`	The width of the page containing the highlighted element	3.5.0

The `pageHeight` and `pageWidth` properties are actual pixels, whereas the `left`, `width`, `top` and `height` properties are percentage values relative to the width and height respectively.

We can use the `Popover` and `Tooltip` components provided by the `@react-pdf-viewer/core` package to demonstrate our use case:

import { Popover, Position, Tooltip } from '@react-pdf-viewer/core';

<Popover
    closeOnClickOutside={true}
    closeOnEscape={true}
    content={() => <div style={{ padding: '0.5rem', width: '12rem' }}>More information go here</div>}
    offset={{ top: 8 + (area.height * area.pageHeight) / 100, left: 0 }}
    position={Position.BottomCenter}
    target={(toggle, _) => (
        <Tooltip
            content={() => 'Click to see more information'}
            offset={{ top: 8 + (area.height * area.pageHeight) / 100, left: 0 }}
            position={Position.BottomCenter}
            target={
                <div
                    className="rpv-search__highlight"
                    data-index={index}
                    style={{
                        left: 0,
                        position: 'absolute',
                        top: 0,
                        height: '100%',
                        width: '100%',
                    }}
                    title={area.keywordStr.trim()}
                    onClick={() => toggle()}
                />
            }
        />
    )}
/>;

In the live demo below, you can click the search icon located at the left to open the search popover. Then hover on each highlighted element to see how it looks.

(The sample code)

Customize the search highlighted elements

See also