react-pdf-viewer v2.4.0 Release Notes

  • ๐Ÿ†• New features

    • ๐Ÿ”Œ The Search plugin provides methods to search for given keywords programatically:
    Method Description
    clearHighlights Clear the highlights
    highlight Highlight multiple keywords
    jumpToNextMatch Jump to the next match
    jumpToPreviousMatch Jump to the previous match
    ๐Ÿ”Œ import { searchPlugin } from '@react-pdf-viewer/search';
    ๐Ÿ”Œ const searchPluginInstance = searchPlugin();
    
    ๐Ÿ”Œ const { clearHighlights, highlight, jumpToNextMatch, jumpToPreviousMatch } = searchPluginInstance;
    
    <button onClick={() => highlight(['document', 'PDF']) }>
        Highlight: document, PDF
    </button>
    
    • ๐Ÿ’… It's possible to add custom styles for highlighted area based on the keyword:
    ๐Ÿ”Œ const searchPluginInstance = searchPlugin({
        onHighlightKeyword: (props: OnHighlightKeyword) => {
            if (props.keyword.source === 'document') {
                props.highlightEle.style.outline = '2px dashed blue';
                props.highlightEle.style.backgroundColor = 'rgba(0, 0, 0, .1)';
            }
        },
    });
    
    • ๐Ÿ”Œ The Zoom plugin exposes the zoomTo function:
    ๐Ÿ”Œ const { zoomTo } = zoomPluginInstance;
    
    // Zoom to a given level
    zoomTo(1.5);
    zoomTo(SpecialZoomLevel.PageFit);
    
    • ๐Ÿ”Œ The Page Navigation plugin provides the jumpToPage function:
    ๐Ÿ”Œ const { jumpToPage } = pageNavigationPluginInstance;
    
    // Jump to the third page
    jumpToPage(2);
    
    • It's possible to retrieve the instances of Attachment, Bookmark, Thumbnail, Toolbar plugins from the Default Layout plugin instance.
    0๏ธโƒฃ const defaultLayoutPluginInstance = defaultLayoutPlugin();
    
    const {
        attachmentPluginInstance,
        bookmarkPluginInstance,
        thumbnailPluginInstance,
        toolbarPluginInstance,
    0๏ธโƒฃ } = defaultLayoutPluginInstance;
    

    Similarity, the Toolbar plugin instance provides the accesses to the instance of other plugins that build the toolbar:

    ๐Ÿ”Œ const toolbarPluginInstance = toolbarPlugin();
    
    const {
        dropPluginInstance,
        fullScreenPluginInstance,
        getFilePluginInstance,
        openPluginInstance,
        pageNavigationPluginInstance,
        printPluginInstance,
        propertiesPluginInstance,
        rotatePluginInstance,
        scrollModePluginInstance,
        searchPluginInstance,
        selectionModePluginInstance,
        zoomPluginInstance,
    ๐Ÿ”Œ } = toolbarPluginInstance;
    

    ๐Ÿ‘Œ Improvements

    • ๐Ÿ‘Œ Support Next.js integration
    • ๐Ÿ›  Fix a warning in the Console when using with Next.js
    • ๐Ÿ”Œ The SingleKeyword type in the Search plugin supports flags:
    interface FlagKeyword {
        keyword: string;
        matchCase?: boolean;    // `false` by default
        wholeWords?: boolean;   // `false` by default
    }
    
    type SingleKeyword = string | RegExp | FlagKeyword;
    

    You can use these flags when passing the keywords:

    ๐Ÿ”Œ const searchPluginInstance = searchPlugin({
        keyword: {
            keyword: 'document',
            matchCase: true,
        },
    });
    

    ๐Ÿ› Bug fixes

    • ๐Ÿ”Œ The Search plugin can find text that belongs to multiple span elements
    • ๐Ÿ›  Fix the type definitions of the MoreActionsPopover component in the Toolbar plugin

    ๐Ÿ’ฅ Breaking changes

    • ๐Ÿ“ฆ The Observer component is removed from the @react-pdf-viewer/core package