« Changelog History


react-pdf-viewer v2.0.1 Release Notes

Release Date: 2020-10-20 // over 3 years ago

  • 🔌 This version rewrites the entire viewer with the plugin architecture. The main viewer component Viewer is very lightweight, 🔌 and everything else is powered by plugins.

    The basic setup looks like following:

    // Import plugin
import { toolbarPlugin } from '@react-pdf-viewer/toolbar';

// Import styles
import '@react-pdf-viewer/toolbar/lib/styles/index.css';

// Create the plugin instance
const toolbarPluginInstance = toolbarPlugin(...);

// Register plugins
<Viewer
    plugins={[
        // Array of plugins
        toolbarPlugin,
        ...
    ]}
/>

    🆕 New features

    • 0️⃣ Viewer supports to use a custom loader instead of the default <Spinner>:
    import { ProgressBar, Viewer } from '@react-pdf-viewer/core';

<Viewer
    renderLoader={(percentages: number) => (
        // You can use your own progress bar component
        <div style={{ width: '240px' }}>
            <ProgressBar progress={Math.round(percentages)} />
        </div>
    )}
/>;
    • 🔌 Customizable name of download file with the get-file plugin:
    const getFilePluginInstance = getFilePlugin({
    fileNameGenerator: (file: OpenFile) => {
        // `file.name` is the URL of opened file
        const fileName = file.name.substring(file.name.lastIndexOf('/') + 1);
        return `a-copy-of-${fileName}`;
    },
});
    • 🔌 New Locale Switcher plugin for switching between different locales
    • 🔌 Provide the ability of setting the scroll mode via the Scroll Mode plugin.

    🐛 Bug fixes

    • The onPageChange could be invoked several times when clicking an outline item

    💥 Breaking changes

    • 🚚 The keyword option is removed. Use the keyword option provided by the search plugin.
    • 🚚 The layout option is removed
    • 🚚 The render option is removed
    • 🚚 The selectionMode option is removed. Use the selectionMode option provided by the selection-mode plugin.
    • 🚚 The onTextLayerRender option is removed. Instead, use the onTextLayerRender option in your plugin.

    ⬆️ Upgrade from 1.7.0 to 2.0.0

    📦 Uninstall the old packages:

    npm uninstall pdfjs-dist
npm uninstall @phuocng/react-pdf-viewer

    📦 Install the new packages:

    npm install [email protected]
npm install @react-pdf-viewer/[email protected]

    👷 Replace the old `Worker` with new one:

    // Remove the old Worker
import { Worker } from '@phuocng/react-pdf-viewer';

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

    👉 Use the new Viewer:

    npm install @react-pdf-viewer/[email protected]
    • Replace the old Viewer with new one:
    // Old Viewer
import Viewer from '@phuocng/react-pdf-viewer';

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

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

// Import styles
import '@react-pdf-viewer/core/lib/styles/index.css';
import '@react-pdf-viewer/default-layout/lib/styles/index.css';

// Create new plugin instance
const defaultLayoutPluginInstance = defaultLayoutPlugin();

// Your render function
<Viewer
    fileUrl='/path/to/document.pdf'
    plugins={[
        // Register plugins
        defaultLayoutPluginInstance,
        ...
    ]}
/>