Customize the button to show the search popover

The `ShowSearchPopover` component provided by the Search plugin has an optional render prop that allows to create a custom button. Here is the sample code that demonstrates the ability:

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

// Your render function
const searchPluginInstance = searchPlugin();
const { ShowSearchPopover } = searchPluginInstance;

<ShowSearchPopover>
    {(props: RenderShowSearchPopoverProps) => (
        <button
            style={{
                backgroundColor: '#357edd',
                border: 'none',
                borderRadius: '4px',
                color: '#ffffff',
                cursor: 'pointer',
                padding: '8px',
            }}
            onClick={props.onClick}
        >
            Search
        </button>
    )}
</ShowSearchPopover>;

(The sample code)

Customize the button to show the search popover

See also