Options

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

import { CharacterMap, Viewer } from '@react-pdf-viewer/core';

const characterMap: CharacterMap = {
    isCompressed: true,
    // The url has to end with "/"
    url: 'https://unpkg.com/pdfjs-dist@2.6.347/cmaps/',
};

<Viewer characterMap={characterMap} fileUrl="/path/to/document.pdf" />;

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

<Viewer fileUrl="/path/to/document.pdf" />;

<Viewer
    fileUrl={...}
    httpHeaders={{
        key: value,
    }}
    withCredentials={true}
/>

<Viewer
    // Display the third page initially
    initialPage={2}
/>

<Viewer initialRotation={90} />

buildPageStyles?: ({ numPages: number; pageIndex: number }) => React.CSSProperties;

tranformSize?: ({ numPages: number; pageIndex: number; size: Rect }) => Rect;

import { bookmarkPlugin } from '@react-pdf-viewer/bookmark';

// Create new plugin instance
const bookmarkPluginInstance = bookmarkPlugin();

// Render
<Viewer fileUrl="/assets/pdf-open-parameters.pdf" plugins={[bookmarkPluginInstance]} />;

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>
    )}
/>;

markRendered: (pageIndex: number) => void;

import { RenderProtectedViewProps, Viewer } from '@react-pdf-viewer/core';

const ProtectedView: React.FC<RenderProtectedViewProps> = ({ passwordStatus, verifyPassword }) => {
    ...
};

<Viewer renderProtectedView={renderProps => <ProtectedView {...renderProps} />} />

<Viewer theme='dark' />

// Or
<Viewer
    theme={{
        theme: 'dark',
    }}
/>

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

<Viewer
    theme={{
        direction: TextDirection.RightToLeft,
    }}
/>;

// Use a right-to-left language with the dark theme
<Viewer
    theme={{
        theme: 'dark',
        direction: TextDirection.RightToLeft,
    }}
/>;

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

<Viewer
    fileUrl="..."
    transformGetDocumentParams={(options: PdfJs.GetDocumentParams) =>
        Object.assign({}, options, {
            disableRange: false,
            disableStream: false,
        })
    }
/>;

<Viewer
    fileUrl={...}
    withCredentials={true}
/>

import { DocumentAskPasswordEvent, Viewer } from '@react-pdf-viewer/core';

const handleAskPassword = (e: DocumentAskPasswordEvent) => {
    // ...
};

<Viewer onDocumentAskPassword={handleAskPassword} />;

import { DocumentLoadEvent, Viewer } from '@react-pdf-viewer/core';

const handleDocumentLoad = (e: DocumentLoadEvent) => {
    console.log(`Number of pages: ${e.doc.numPages}`);
};

<Viewer fileUrl="/path/to/document.pdf" onDocumentLoad={handleDocumentLoad} />;

import { PageChangeEvent, Viewer } from '@react-pdf-viewer/core';

const handlePageChange = (e: PageChangeEvent) => {
    // ...
};

<Viewer fileUrl="/path/to/document.pdf" onPageChange={handlePageChange} />;

import { RotateEvent, Viewer } from '@react-pdf-viewer/core';

const handleRotate = (e: RotateEvent) => {
    // ...
};

<Viewer fileUrl="/path/to/document.pdf" onRotate={handleRotate} />;

import { RotatePageEvent, Viewer } from '@react-pdf-viewer/core';

const handleRotatePage = (e: RotatePageEvent) => {
    // ...
};

<Viewer fileUrl="/path/to/document.pdf" onRotatePage={handleRotatePage} />;

const handleSwitchTheme = (theme: string) => {
    localStorage.setItem('theme', theme);
};
const theme = localStorage.getItem('theme') || 'light';

<Viewer theme={theme} onSwitchTheme={handleSwitchTheme} />;

import { Viewer, ZoomEvent } from '@react-pdf-viewer/core';

const handleZoom = (e: ZoomEvent) => {
    console.log(`Zoom to ${e.scale}`);
};

<Viewer fileUrl="/path/to/document.pdf" onZoom={handleZoom} />;

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

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

<Worker workerUrl="https://unpkg.com/pdfjs-dist@2.5.207/build/pdf.worker.min.js">...</Worker>;