React PDF viewer v3.0.0 Release Notes

  • 🆕 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"]'),
    }),
    
    • 0️⃣ 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
    • 0️⃣ 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