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

New features

Add new trigger option for the Highlight plugin

import { Trigger } from '@react-pdf-viewer/highlight';

const highlightPluginInstance = highlightPlugin({
    trigger: Trigger.None,
});

There are two possible values for the trigger option:

Value	Description
`Trigger.TextSelection` (default)	Show the target after users select text
`Trigger.None`	Doesn't trigger the highlight. It is often used to render the highlight areas

The render props of the CurrentPageLabel component provided by the Page Navigation plugin includes new pageLabel property.
It is useful if the page has a label that isn't the same as its page number:

const { CurrentPageLabel } = pageNavigationPluginInstance;

<CurrentPageLabel>
    {(props) => (
        <>
            {props.numberOfPages}
            {props.pageLabel !== `${props.currentPage + 1}` && `(${props.pageLabel})`}
        </>
    )}
</CurrentPageLabel>;

The Thumbnails component displays the page labels if there are. You also can customize the page labels:

const thumbnailPluginInstance = thumbnailPlugin({
    renderCurrentPageLabel: (props) => (
        <>
            {props.pageIndex + 1}
            {props.pageLabel !== `${props.pageIndex + 1}` && `(${props.pageLabel})`}
        </>
    ),
});
const { Thumbnails } = thumbnailPluginInstance;

<Thumbnails />;

The Toolbar plugin provides the renderDefaultToolbar function to create a custom toolbar from the default toolbar easily.
The following sample code prepends of to the NumberOfPages component:

import type { ToolbarSlot, TransformToolbarSlot } from '@react-pdf-viewer/toolbar';

const { renderDefaultToolbar, Toolbar } = toolbarPluginInstance;

const transform: TransformToolbarSlot = (slot: ToolbarSlot) => {
    const { NumberOfPages } = slot;
    return Object.assign({}, slot, {
        NumberOfPages: () => (
            <>
                of <NumberOfPages />
            </>
        ),
    });
};

// Render the toolbar
<Toolbar>{renderDefaultToolbar(transform)}</Toolbar>;

Improvement

Disable the printing functionality if the document doesn't allow to print

Bug fixes

Can't resize the sidebar when using with the Fluent UI library
Fix the TypeScript definition of the Cover component
Fix an edge case where there are extra empty pages when printing a document

@react-pdf-viewer/core 2.10.0 v2.10.0: Page labels on Node.js Yarn

New features

Improvement

Bug fixes

@react-pdf-viewer/core 2.10.0
v2.10.0: Page labels

on Node.js Yarn