List attachments

This example demonstrates how we can list attachments of a PDF document by using the attachment plugin.

In the following sample code, the attachments are listed on the left side. The right side displays the current PDF document.

import { attachmentPlugin } from '@react-pdf-viewer/attachment';
import '@react-pdf-viewer/attachment/lib/styles/index.css';

const attachmentPluginInstance = attachmentPlugin();

// Render
<div
    style={{
        border: '1px solid rgba(0, 0, 0, 0.3)',
        display: 'flex',
        height: '100%',
    }}
>
    <div
        style={{
            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
            overflow: 'auto',
            width: '30%',
        }}
    >
        <Attachments />
    </div>
    <div style={{ flex: 1 }}>
        <Viewer
            fileUrl="/assets/pdf-with-attachment.pdf"
            plugins={[
                // Register the attachment plugin
                attachmentPluginInstance,
            ]}
        />
    </div>
</div>;

You can click on each attachment name to download it.

The sample document is taken from tcpdf

(The sample code)