react-pdf-viewer v2.4.0 Release Notes
-
๐ New features
- ๐ The Search plugin provides methods to search for given keywords programatically:
Method Description clearHighlights
Clear the highlights highlight
Highlight multiple keywords jumpToNextMatch
Jump to the next match jumpToPreviousMatch
Jump to the previous match ๐ import { searchPlugin } from '@react-pdf-viewer/search'; ๐ const searchPluginInstance = searchPlugin(); ๐ const { clearHighlights, highlight, jumpToNextMatch, jumpToPreviousMatch } = searchPluginInstance; <button onClick={() => highlight(['document', 'PDF']) }> Highlight: document, PDF </button>
- ๐ It's possible to add custom styles for highlighted area based on the keyword:
๐ const searchPluginInstance = searchPlugin({ onHighlightKeyword: (props: OnHighlightKeyword) => { if (props.keyword.source === 'document') { props.highlightEle.style.outline = '2px dashed blue'; props.highlightEle.style.backgroundColor = 'rgba(0, 0, 0, .1)'; } }, });
- ๐ The Zoom plugin exposes the
zoomTo
function:
๐ const { zoomTo } = zoomPluginInstance; // Zoom to a given level zoomTo(1.5); zoomTo(SpecialZoomLevel.PageFit);
- ๐ The Page Navigation plugin provides the
jumpToPage
function:
๐ const { jumpToPage } = pageNavigationPluginInstance; // Jump to the third page jumpToPage(2);
- It's possible to retrieve the instances of Attachment, Bookmark, Thumbnail, Toolbar plugins from the Default Layout plugin instance.
0๏ธโฃ const defaultLayoutPluginInstance = defaultLayoutPlugin(); const { attachmentPluginInstance, bookmarkPluginInstance, thumbnailPluginInstance, toolbarPluginInstance, 0๏ธโฃ } = defaultLayoutPluginInstance;
Similarity, the Toolbar plugin instance provides the accesses to the instance of other plugins that build the toolbar:
๐ const toolbarPluginInstance = toolbarPlugin(); const { dropPluginInstance, fullScreenPluginInstance, getFilePluginInstance, openPluginInstance, pageNavigationPluginInstance, printPluginInstance, propertiesPluginInstance, rotatePluginInstance, scrollModePluginInstance, searchPluginInstance, selectionModePluginInstance, zoomPluginInstance, ๐ } = toolbarPluginInstance;
๐ Improvements
- ๐ Support Next.js integration
- ๐ Fix a warning in the Console when using with Next.js
- ๐ The
SingleKeyword
type in theSearch
plugin supports flags:
interface FlagKeyword { keyword: string; matchCase?: boolean; // `false` by default wholeWords?: boolean; // `false` by default } type SingleKeyword = string | RegExp | FlagKeyword;
You can use these flags when passing the keywords:
๐ const searchPluginInstance = searchPlugin({ keyword: { keyword: 'document', matchCase: true, }, });
๐ Bug fixes
- ๐ The Search plugin can find text that belongs to multiple
span
elements - ๐ Fix the type definitions of the
MoreActionsPopover
component in the Toolbar plugin
๐ฅ Breaking changes
- ๐ฆ The
Observer
component is removed from the@react-pdf-viewer/core
package