react-pdf-viewer v3.0.0 Release Notes
-
๐ New features
- โ
Add new
testId
property toMenuItem
,MinimalButton
,PrimaryButton
- Be able to customize the button to exit the full screen mode:
const fullScreenPluginInstance = fullScreenPlugin({ renderExitFullScreenButton: (props) => ( <div style={{ bottom: '1rem', position: 'fixed', right: '1rem', }} > <button onClick={props.onClick}>Exit full screen</button> </div> ), });
- ๐ The full screen plugin allows to set the full screen element. The following code will include the pages container and the toolbar in the full screen mode:
const fullScreenPluginInstance = fullScreenPlugin({ // `pagesContainer` is the pages container getFullScreenTarget: (pagesContainer) => pagesContainer.closest('[data-testid="default-layout__body"]'), }),
- 0๏ธโฃ The thumbnail plugin adds new
renderSpinner
property that can be used to replace the defaultSpinner
component. For example, it is displayed when loading the cover or thumbnail of a page:
const thumbnailPluginInstance = thumbnailPlugin({ renderSpinner: () => <div className="square-spinner" />, });
- The
Thumbnails
component adds newrenderThumbnailItem
property that is used to customize the thumbnail renderer:
const renderThumbnailItem = (props: RenderThumbnailItemProps) => ( <div key={props.pageIndex} onClick={props.onJumpToPage} style={{ backgroundColor: props.pageIndex === props.currentPage ? 'rgba(0, 0, 0, 0.3)' : '#fff', cursor: 'pointer', padding: '0.5rem', }} > {props.renderPageThumbnail} </div> ); const thumbnailPluginInstance = thumbnailPlugin(); const { Thumbnails } = thumbnailPluginInstance; <Thumbnails renderThumbnailItem={renderThumbnailItem} />;
๐ Improvements
- โ
Add
data-testid
attribute to buttons in the toolbar - The
Cover
component uses the image instead of canvas tag - 0๏ธโฃ The default layout shouldn't have a horizontal scrollbar when the default scale isn't set
๐ Bug fixes
- Navigating between search results should be the same as their appearances on pages
- The internal links don't work properly in some cases
- The thumbnails are stuck at loading spinner
- The
Cover
component position isn't correct - The number of pages slot
<NumberOfPages />
isn't correct when using therenderToolbar
- ๐ป There is an exception of
React has detected a change in the order of Hooks
when switching documents
- โ
Add new