Example: Customize loader renderer

By default, the Viewer component uses the default spinner (<Spinner />) component when loading a document. It is not really user friendly in the case of loading a big file, because users do not know how much the document is loaded.

The renderLoader option - available from 2.0.0 - solves the problem. It allows us to use a custom loader.

The option has the following signature:

(percentages: number) => ReactElement

The percentages option are the number of percentages of document size which has been loaded.

In the sample code below, the default spinner is replaced by the built-in ProgressBar:

import { ProgressBar } from '@react-pdf-viewer/core';

// Your render function
<Viewer
    fileUrl="..."
    renderLoader={(percentages: number) => (
        <div style={{ width: '240px' }}>
            <ProgressBar progress={Math.round(percentages)} />
        </div>
    )}
/>

You are free to use your own loading progress component instead of ProgressBar.

(The sample code)