React PDF viewer v3.2.0 Release Notes
-
🆕 New features
- 0️⃣ The
Popover
component has new proplockScroll
which indicates whether thebody
element is scrollable or not. By default, it takes thetrue
value - The
Viewer
component adds newonRotate
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
, orCmd + 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);
- 0️⃣ The