New features
- The plugin exposes new functions:
| Function | Destination |
|---|---|
jumpToNextDestination
| Jump to the next destination |
jumpToPreviousDestination
| Jump to the previous destination |
- The
Viewercomponent adds a new property to disable smooth scroll:
<Viewer enableSmoothScroll={false} />- It's possible to set the range of pages that will be pre-rendered. The range consists of the visible pages and some pages before and after the visible pages.
import type { SetRenderRange, VisiblePagesRange } from '@react-pdf-viewer/core';
const setRenderRange: SetRenderRange = React.useCallback((visiblePagesRange: VisiblePagesRange) => {
return {
startPage: visiblePagesRange.startPage - 10,
endPage: visiblePagesRange.endPage + 10,
};
}, []);
// Another usage: render the first 20 pages initially
const setRenderRange: SetRenderRange = React.useCallback((visiblePagesRange: VisiblePagesRange) => {
return {
startPage: visiblePagesRange.endPage <= 20 ? 0 : visiblePagesRange.startPage - 5,
endPage:
visiblePagesRange.startPage <= 20
? Math.max(20, visiblePagesRange.endPage + 5)
: visiblePagesRange.endPage + 5,
};
}, []);
<Viewer setRenderRange={setRenderRange} />;- The
Covercomponent adds newwidthproperty:
const { Cover } = thumbnailPluginInstance;
// Render the cover of second page
<Cover getPageIndex={() => 1} width={300} />;Improvements
- Custom elements added to the page layer can be positioned outside of the page
- Improve the performance by removing many unnecessary rerenders. They are triggered when smooth scrolling or entering the full-screen mode
- Uses can zoom by pinching a trackpad
- The page navigation plugin adds more shortcuts:
| Shortcut | Operating System | Action |
|---|---|---|
Command + ArrowLeft
| macOS | Jump to the previous bookmark destination |
Alt + ArrowLeft
| Windows | Same as above |
Command + ArrowRight
| macOS | Jump to next bookmark destination |
Alt + ArrowRight
| Windows | Same as above |
Bug fixes
- The
Viewercomponent scrolls to theinitialPagepage automatically after resizing the container or browser - The viewer doesn't keep the current page when entering the full-screen mode in some cases
Breaking change
- The
jumpToDestinationfunction now has only a single property. You don't have to change anything if your application doesn't have any custom plugin using thejumpToDestinationfunction.
// Before
import type { DestinationOffsetFromViewport } from '@react-pdf-viewer/core';
import { SpecialZoomLevel } from '@react-pdf-viewer/core';
jumpToDestination(
pageIndex: number,
bottomOffset: number | DestinationOffsetFromViewport,
leftOffset: number | DestinationOffsetFromViewport,
scaleTo?: number | SpecialZoomLevel
);
// After
import type { Destination } from '@react-pdf-viewer/core';
jumpToDestination(destination: Destination);