react-pdf-viewer v3.2.0 Release Notes

  • ๐Ÿ†• New features

    • 0๏ธโƒฃ The Popover component has new prop lockScroll which indicates whether the body element is scrollable or not. By default, it takes the true value
    • The Viewer component adds new onRotate callback that is invoked when users rotate the document:
    <Viewer
        onRotate={({ direction, doc, rotation }) => {
            // `direction` is the rotate direction
            // `doc` is the current document
            // `rotation` is the latest rotation value
        }}
    />
    
    • Provide the ability of rotating a particular page. You can customize a thumbnail renderer to add the rotating functionality to each page:
    const renderThumbnailItem = (props: RenderThumbnailItemProps) => (
        <MinimalButton onClick={() => props.onRotatePage(RotateDirection.Forward)}>
            <RotateForwardIcon />
        </MinimalButton>
        <MinimalButton onClick={() => props.onRotatePage(RotateDirection.Backward)}>
            <RotateBackwardIcon />
        </MinimalButton>
    );
    
    const thumbnailPluginInstance = thumbnailPlugin();
    const { Thumbnails } = thumbnailPluginInstance;
    
    <Thumbnails renderThumbnailItem={renderThumbnailItem} />
    

    It's also possible to do it by using the renderPage:

    const renderPage: RenderPage = (props: RenderPageProps) => (
        <>
            {props.canvasLayer.children}
            <div>
                <MinimalButton onClick={() => props.onRotatePage(RotateDirection.Forward)}>
                    <RotateForwardIcon />
                </MinimalButton>
                <MinimalButton onClick={() => props.onRotatePage(RotateDirection.Backward)}>
                    <RotateBackwardIcon />
                </MinimalButton>
            </div>
            {props.annotationLayer.children}
            {props.textLayer.children}
        </>
    );
    
    <Viewer renderPage={renderPage} />;
    

    ๐Ÿ”Œ The rotate plugin adds new RotatePage component in case you want to rotate a particular page from outside:

    const rotatePluginInstance = rotatePlugin();
    const { RotatePage } = rotatePluginInstance;
    
    <RotatePage>
        {(props) => <PrimaryButton onClick={() => props.onRotatePage(0, RotateDirection.Forward)}>Rotate the first page forward</PrimaryButton>}
    </RotatePage>
    <RotatePage>
        {(props) => <PrimaryButton onClick={() => props.onRotatePage(0, RotateDirection.Backward)}>Rotate the first page backward</PrimaryButton>}
    </RotatePage>
    
    • The onRotatePage event is triggered when a page is rotated:
    <Viewer
        onRotatePage={({ direction, doc, pageIndex, rotation }) => {
            // `direction` is the rotate direction
            // `doc` is the current document
            // `pageIndex` is the zero-based page index
            // `rotation` is the latest rotation value
        }}
    />
    

    ๐Ÿ‘Œ Improvements

    • ๐ŸŽ The search popover is opened if users press the shortcuts (Ctrl + F, or Cmd + F on macOS) when the mouse is inside the viewer container
    • It's able to scroll the pages when opening the search popover
    • ๐Ÿ‘ Support link annotations that have the unsafeUrl property

    ๐Ÿ› Bug fixes

    • Typo in full screen change event
    • There is a visible page that isn't rendered when setting the zoom level as page width
    • The thumbnails aren't rotated after rotating the document

    ๐Ÿ’ฅ Breaking changes

    • ๐Ÿ“ฆ The RotateDirection provided by the @react-pdf-viewer/rotate package now belongs to the @react-pdf-viewer/core package:
    // v3.1.2 and previous versions
    import { RotateDirection } from '@react-pdf-viewer/rotate';
    
    // From v3.2.0
    import { RotateDirection } from '@react-pdf-viewer/core';
    
    • ๐Ÿ”Œ The rotate function used in the plugins changes the parameter type:
    // v3.1.2 and previous versions
    rotate(90);
    rotate(-90);
    
    // From v3.2.0
    rotate(RotateDirection.Forward);
    rotate(RotateDirection.Backward);