react-pdf-viewer v2.10.0 Release Notes

  • ๐Ÿ†• 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
    0๏ธโƒฃ Trigger.TextSelection (default)
    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 />;
    
    • 0๏ธโƒฃ 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