Example: 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;

    (props: RenderShowPropertiesProps) => (
                backgroundColor: '#357edd',
                border: 'none',
                borderRadius: '4px',
                color: '#ffffff',
                cursor: 'pointer',
                padding: '8px',

(The sample code)

Related example