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>
);

See also