Use the default button to show the search popover

The following example uses the default button `<ShowSearchPopoverButton />` provided by the Search plugin. It also highlights all the PDF words found in the document.

import { searchPlugin } from '@react-pdf-viewer/search';

// Your render function
const searchPluginInstance = searchPlugin({
    // Highlight "PDF" words initially
    keyword: 'PDF',
});
const { ShowSearchPopoverButton } = searchPluginInstance;

return (
    <div
        className="rpv-core__viewer"
        style={{
            border: '1px solid rgba(0, 0, 0, 0.3)',
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
        }}
    >
        <div
            style={{
                alignItems: 'center',
                backgroundColor: '#eeeeee',
                borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
                display: 'flex',
                padding: '4px',
            }}
        >
            <ShowSearchPopoverButton />
        </div>
        <div
            style={{
                flex: 1,
                overflow: 'hidden',
            }}
        >
            <Viewer fileUrl="/assets/pdf-open-parameters.pdf" plugins={[searchPluginInstance]} />
        </div>
    </div>
);

(The sample code)

Use the default button to show the search popover

See also