@react-pdf-viewer/core 2.4.0 on Node.js Yarn

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.

const defaultLayoutPluginInstance = defaultLayoutPlugin();

const {
    attachmentPluginInstance,
    bookmarkPluginInstance,
    thumbnailPluginInstance,
    toolbarPluginInstance,
} = 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 change

The Observer component is removed from the @react-pdf-viewer/core package

@react-pdf-viewer/core 2.4.0 v2.4.0 on Node.js Yarn

New features

Improvements

Bug fixes

Breaking change

@react-pdf-viewer/core 2.4.0
v2.4.0

on Node.js Yarn