@react-pdf-viewer/core 3.0.0

New features for Full screen and Thumbnail plugin

on Node.js Yarn

New features

• Add new testId property to MenuItem, MinimalButton, PrimaryButton
• Be able to customize the button to exit the full screen mode:

const fullScreenPluginInstance = fullScreenPlugin({
    renderExitFullScreenButton: (props) => (
        <div
            style={{
                bottom: '1rem',
                position: 'fixed',
                right: '1rem',
            }}
        >
            <button onClick={props.onClick}>Exit full screen</button>
        </div>
    ),
});

• The full screen plugin allows to set the full screen element. The following code will include the pages container and the toolbar in the full screen mode:

const fullScreenPluginInstance = fullScreenPlugin({
    // `pagesContainer` is the pages container
    getFullScreenTarget: (pagesContainer) => pagesContainer.closest('[data-testid="default-layout__body"]'),
}),

• The thumbnail plugin adds new renderSpinner property that can be used to replace the default Spinner component. For example, it is displayed when loading the cover or thumbnail of a page:

const thumbnailPluginInstance = thumbnailPlugin({
    renderSpinner: () => <div className="square-spinner" />,
});

• The Thumbnails component adds new renderThumbnailItem property that is used to customize the thumbnail renderer:

const renderThumbnailItem = (props: RenderThumbnailItemProps) => (
    <div
        key={props.pageIndex}
        onClick={props.onJumpToPage}
        style={{
            backgroundColor: props.pageIndex === props.currentPage ? 'rgba(0, 0, 0, 0.3)' : '#fff',
            cursor: 'pointer',
            padding: '0.5rem',
        }}
    >
        {props.renderPageThumbnail}
    </div>
);

const thumbnailPluginInstance = thumbnailPlugin();
const { Thumbnails } = thumbnailPluginInstance;

<Thumbnails renderThumbnailItem={renderThumbnailItem} />;

Improvements

• Add data-testid attribute to buttons in the toolbar
• The Cover component uses the image instead of canvas tag
• The default layout shouldn't have a horizontal scrollbar when the default scale isn't set

Bug fixes

• Navigating between search results should be the same as their appearances on pages
• The internal links don't work properly in some cases
• The thumbnails are stuck at loading spinner
• The Cover component position isn't correct
• The number of pages slot <NumberOfPages /> isn't correct when using the renderToolbar
• There is an exception of React has detected a change in the order of Hooks when switching documents