Customize the progress bar when preparing pages to print

When users click the Print button on the toolbar, the print plugin will display a progress bar indicating how long the preparation might take. The progress bar is shown on top of the current page.

Do you know that you can replace the default progress bar with your own component with the `renderProgressBar` property:

import { printPlugin } from '@react-pdf-viewer/print';

const printPluginInstance = printPlugin({
    renderProgressBar: customProgressBar,
});

The property is a render props function that takes the following parameters and returns a React element:

const customProgressBar = (numLoadedPages: number, numPages: number, onCancel: () => void) => (
    // Your own progress bar
);

Parameter	Type	Description	From
`numLoadedPages`	`number`	The number of pages which have been prepared and ready to print	3.6.0
`numPages`	`number`	The total number of pages that will be printed	3.6.0
`onCancel`	`Function`	Cancel print	3.6.0

The sample code below uses the `Button` and `Spinner` components to render a custom progress bar:

import { Button, Spinner } from '@react-pdf-viewer/core';

const customProgressBar = (numLoadedPages: number, numPages: number, onCancel: () => void) => (
    <div>
        <div style={{ marginBottom: '1rem' }}>
            Preparing {numLoadedPages}/{numPages} pages ...
        </div>
        <div style={{ marginBottom: '1rem' }}>
            <Spinner />
        </div>
        <Button onClick={onCancel}>Cancel</Button>
    </div>
);

(The sample code)

The property is also available when using the default layout plugin:

import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';

const defaultLayoutPluginInstance = defaultLayoutPlugin({
    toolbarPlugin: {
        printPlugin: {
            renderProgressBar: customProgressBar,
        },
    },
});

Click the Print button on the toolbar (The sample code)

The document used in the example belongs to this site

Customize the progress bar when preparing pages to print

See also