react-pdf-viewer v2.10.0 Release Notes
-
๐ New features
- ๐ Add new
trigger
option for the Highlight plugin
import { Trigger } from '@react-pdf-viewer/highlight'; const highlightPluginInstance = highlightPlugin({ trigger: Trigger.None, });
There are two possible values for the
trigger
option:Value Description 0๏ธโฃ Trigger.TextSelection
(default)Trigger.None
Doesn't trigger the highlight. It is often used to render the highlight areas - ๐ The render props of the
CurrentPageLabel
component provided by the Page Navigation plugin includes newpageLabel
property. It is useful if the page has a label that isn't the same as its page number:
const { CurrentPageLabel } = pageNavigationPluginInstance; <CurrentPageLabel> {(props) => ( <> {props.numberOfPages} {props.pageLabel !== `${props.currentPage + 1}` && `(${props.pageLabel})`} </> )} </CurrentPageLabel>;
- The
Thumbnails
component displays the page labels if there are. You also can customize the page labels:
const thumbnailPluginInstance = thumbnailPlugin({ renderCurrentPageLabel: (props) => ( <> {props.pageIndex + 1} {props.pageLabel !== `${props.pageIndex + 1}` && `(${props.pageLabel})`} </> ), }); const { Thumbnails } = thumbnailPluginInstance; <Thumbnails />;
- 0๏ธโฃ The Toolbar plugin provides the
renderDefaultToolbar
function to create a custom toolbar from the default toolbar easily. The following sample code prependsof
to theNumberOfPages
component:
import type { ToolbarSlot, TransformToolbarSlot } from '@react-pdf-viewer/toolbar'; const { renderDefaultToolbar, Toolbar } = toolbarPluginInstance; const transform: TransformToolbarSlot = (slot: ToolbarSlot) => { const { NumberOfPages } = slot; return Object.assign({}, slot, { NumberOfPages: () => ( <> of <NumberOfPages /> </> ), }); }; // Render the toolbar <Toolbar>{renderDefaultToolbar(transform)}</Toolbar>;
๐ Improvement
- ๐จ Disable the printing functionality if the document doesn't allow to print
๐ Bug fixes
- ๐ป Can't resize the sidebar when using with the Fluent UI library
- Fix the TypeScript definition of the
Cover
component - ๐จ Fix an edge case where there are extra empty pages when printing a document
- ๐ Add new