« Changelog History


react-pdf-viewer v2.1.0 Release Notes

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

  • 🆕 New features

    • 🔌 Add onAnnotationLayerRender hook for plugin. We can perform custom action after annotations are rendered. The following sample code creates a plugin that finds all annotation links, and add the target="_blank" attribute to the links:
    import { AnnotationType, Plugin, PluginOnAnnotationLayerRender } from '@react-pdf-viewer/core';

const customPlugin = (): Plugin => {
    const onRenderAnnotations = (e: PluginOnAnnotationLayerRender) => {
        // Find all `Link` annotation
        e.annotations
            .filter((annotation) => annotation.annotationType === AnnotationType.Link)
            .forEach((annotation) => {
                if (annotation.url) {
                    // Find the `a` element represents the link
                    [...e.container.querySelectorAll('.rpv-core-annotation-link a')].forEach((linkEle) => {
                        linkEle.setAttribute('target', '_blank');
                    });
                }
            });
    };

    return {
        onAnnotationLayerRender: onRenderAnnotations,
    };
};
    • 🔌 The search plugin allows to set multiple keywords to be highlighted initially
    // Use the search plugin
import { searchPlugin } from '@react-pdf-viewer/search';
const searchPluginInstance = searchPlugin({
    keyword: ['document', 'PDF'],
});

// Use with default-layout plugin
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
const defaultLayoutPluginInstance = defaultLayoutPlugin({
    toolbarPlugin: {
        searchPlugin: {
            keyword: ['document', 'PDF'],
        },
    },
});

    👌 Improvements

    • ⚡️ Optimize the search plugin that doesn't perform unhighligting and highlighting many times after texts are rendered

    🐛 Bug fixes

    • Clicking Previous match or Next match button throws an error if the keyword is empty
    • 💅 Fix the incorrect path of styles

    ⬆️ Upgrade from 2.0.1 to 2.1.0

    💅 We have to update the path of styles which are placed in the lib directory. For example:

    // Old version
import '@react-pdf-viewer/core/styles/index.css';

// New version
import '@react-pdf-viewer/core/lib/styles/index.css';