« Changelog History


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);