Customize the button to list the document properties

The `ShowProperties` component provided by the Properties plugin has an optional render prop that allows to create a custom button. Here is the sample code that demonstrates the ability:
import { propertiesPlugin, RenderShowPropertiesProps } from '@react-pdf-viewer/properties';
// Your render function
const propertiesPluginInstance = propertiesPlugin();
const { ShowProperties } = propertiesPluginInstance;
<ShowProperties>
{(props: RenderShowPropertiesProps) => (
<button
style={{
backgroundColor: '#357edd',
border: 'none',
borderRadius: '4px',
color: '#ffffff',
cursor: 'pointer',
padding: '8px',
}}
onClick={props.onClick}
>
Properties
</button>
)}
</ShowProperties>;

See also