Customize the print button

The `Print` component provided by the Print plugin has a render prop that allows consumers to use a custom button. Here is the sample code that demonstrates the ability:

import { Viewer } from '@react-pdf-viewer/core';
import { printPlugin, RenderPrintProps } from '@react-pdf-viewer/print';

import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/print/lib/styles/index.css';

const printPluginInstance = printPlugin();
const { Print } = printPluginInstance;

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

(The sample code)

Customize the print button

See also