Changelog History
Page 1
-
v3.9.0 Changes
๐ New features
- New
pageLayout
option to customize the layout of each page. The following code adds margin between pages, and center the page in its container:
import { type PageLayout, Viewer } from '@react-pdf-viewer/core'; const pageLayout: PageLayout = { buildPageStyles: () => ({ alignItems: 'center', display: 'flex', justifyContent: 'center', }), tranformSize: ({ size }) => ({ height: size.height + 30, width: size.width + 30 }), }; <Viewer pageLayout={pageLayout} />;
๐ Bug fixes
- Keep the current page after rotating the document
๐ Fix bugs that might happen with a document whose pages have different dimensions
- Clicking a link annotation doesn't go to the correct destination position
- Don't scroll to the top of the target page corresponding to the
initialPage
option
๐ฅ Breaking change
- The
pageHeight
andpageWidth
properties inRenderViewer
are replaced with thepageSizes
property that are the sizes of pages. You don't have to do anything if you don't develope your own plugin using those properties.
- New
-
v3.8.0 Changes
๐ New features
- Set the initial rotation with the new
initialRotation
parameter:
<Viewer initialRotation={90} />
- ๐ The highlight plugin provides new function to switch the trigger mode:
const highlightPluginInstance = highlightPlugin(); const { switchTrigger } = highlightPluginInstance; // Switch to None switchTrigger(Trigger.None); // Switch to Selection mode switchTrigger(Trigger.TextSelection);
- Users can click and drag to highlight an area
๐ Improvements
- Adjust the pointer when hovering the mouse over checkboxes inside the search popover
- Keep the expanded/collapsed state of each bookmark
- ๐ Set the title and
aria-label
attributes for link annotations without using the Bookmark plugin - ๐ Support pdf-js 3.0.279
-
RenderBookmarkItemProps
includes newpath
property that indicates the path from each bookmark item to the root -
SelectionData
provides more information about the selected text including:
Property Type Description selectedText
string
The selected text divTexts
DivText[]
List of text items contain the selected text A
DivText
item consists ofProperty Type Description divIndex
number
The zero-based text element rendered by the text layer pageIndex
number
The zero-based page index textContent
string
The text content of text element - 0๏ธโฃ The open file dialog filters PDF files by default
- The search popover should perform search based on the initial keyword passed to the
keyword
option:
const searchPluginInstance = searchPlugin({ keyword: '...', });
-
RenderSearchProps
adds newisDocumentLoaded
property that indicates if the document is loaded. You can use it to perform searching for a keyword in a sidebar:
import type { Match, RenderSearchProps } from '@react-pdf-viewer/search'; const SearchSidebarInner: React.FC<{ renderSearchProps: RenderSearchProps }> = ({ renderSearchProps }) => { const [matches, setMatches] = React.useState<Match[]>([]); const { isDocumentLoaded, keyword, search } = renderSearchProps; React.useEffect(() => { if (isDocumentLoaded && keyword) { search().then((matches) => { setMatches(matches); }); } }, [isDocumentLoaded]); return ( // Display matches ... ); };
๐ Bug fixes
- Can't render certain PDF documents that contain an annotation whose destination consists of non alphabetical characters
- Popover doesn't work if the
Viewer
is rendered inside ShadowDOM - ๐ Replace the deprecated
contents
andtitle
properties of annotations with corresponding objects - The annotation link doesn't navigate to the correct page in some cases
- The
Cover
component doesn't rotate the corresponding rotated page - The
jumpToHighlightArea
function does not work properly with some documents - The
startPageIndex
andendPageIndex
properties ofSelectionData
aren't correct
๐ฅ Breaking change
- In addition to selecting texts, users can click and drag to highlight a particular area. The second way doesn't provide the
SelectionData
data. TheSelectionData
property inRenderHighlightContentProps
andRenderHighlightTargetProps
turn to optional properties.
interface RenderHighlightContentProps { selectionData?: SelectionData; } interface RenderHighlightTargetProps { selectionData?: SelectionData; }
You have to check if it exists before using it:
if (renderHighlightContentProps.selectionData) { // Do something ... } if (renderHighlightTargetProps.selectionData) { // Do something ... }
- Set the initial rotation with the new
-
v3.7.0 Changes
๐ New feature
- You can customize the bookmarks by using the
renderBookmarkItem
properly:
<Bookmark renderBookmarkItem={renderBookmarkItem} />
- 0๏ธโฃ The default layout plugin provides new
toggleTab
function to toggle a given tab in the sidebar:
const defaultLayoutPluginInstance = defaultLayoutPlugin(); const { toggleTab } = defaultLayoutPluginInstance; // Toggle the second tab toggleTab(1);
๐ Improvement
- ๐ Clicking
Command
+ArrowUp
(on macOS) orCtrl
+ArrowUp
(on Windows) will bring users to the previous clicked link annotation. You can disable that shortcuts via theenableShortcuts
option:
// Use the standalone page navigation plugin const pageNavigationPluginInstance = pageNavigationPlugin({ enableShortcuts: false, }); // Use the default layout plugin const defaultLayoutPluginInstance = defaultLayoutPlugin({ toolbarPlugin: { pageNavigationPlugin: { enableShortcuts: false, }, }, });
๐ Bug fixes
- Clicking a particular bookmark might not go to the destination
- Link annotations with unsafe URLs won't be rendered to avoid secutiry issues
- The
CharacterMap
type isn't available - The
onPageChange
callback does not trigger if the current page equals to the initial page - ๐ The page navigation options are missing when creating a toolbar plugin
- The search popover always shows up after pressing shortcuts
- The viewer always navigates to previous, next pages after users press shortcuts even the document isn't focused
- You can customize the bookmarks by using the
-
v3.6.0 Changes
๐ New features
- ๐จ Allow to choose pages when printing a document via the
setPages
option. Is is a function that takes the current document and returns the list of zero-based index of pages you want to print.
import type { PdfJs } from '@react-pdf-viewer/core'; import { printPlugin } from '@react-pdf-viewer/print'; const printPluginInstance = printPlugin({ setPages: (doc: PdfJs.PdfDocument) => number[], });
Here are some examples:
// Only print the even pages const printPluginInstance = printPlugin({ setPages: (doc) => Array(doc.numPages) .fill(0) .map((_, i) => i) .filter((i) => (i + 1) % 2 === 0), }); // Only print the odd pages const printPluginInstance = printPlugin({ setPages: (doc) => Array(doc.numPages) .fill(0) .map((_, i) => i) .filter((i) => (i + 1) % 2 === 1), });
0๏ธโฃ The option is also available when using the default layout plugin:
const defaultLayoutPluginInstance = defaultLayoutPlugin({ toolbarPlugin: { printPlugin: { setPages: ..., }, }, });
๐ You don't have to implement functions that return popular pages numbers. The print plugin provides useful functions for most popular cases:
import { getAllPagesNumbers, getCustomPagesNumbers, getEvenPagesNumbers, getOddPagesNumbers, } from '@react-pdf-viewer/print'; const printPluginInstance = printPlugin({ setPages: getEvenPagesNumbers, });
Function Description getAllPagesNumbers
Returns all pages numbers of the document getCustomPagesNumbers
Returns the custom pages numbers. The input is a string consists of given pages or ranges of pages. For example: 1, 2, 3 1-3 1-3, 5, 8-11 getEvenPagesNumbers
Returns even pages numbers getOddPagesNumbers
Returns odd pages numbers - ๐จ The target print pages can be determined from users' input:
import { getEvenPagesNumbers } from '@react-pdf-viewer/print'; const printPluginInstance = printPlugin(); const { setPages } = printPluginInstance; // Show UI for users to choose pages const handleChooseEvenPages = () => setPages(getEvenPagesNumbers); <label> <input type="radio" onChange={handleChooseEvenPages} /> Print even pages </label>;
- ๐ The print plugin exposes the
print
function:
import { printPlugin } from '@react-pdf-viewer/print'; const printPluginInstance = printPlugin(); const { print } = printPluginInstance;
0๏ธโฃ The
print
function is also available if you use the default layout plugin:import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; const defaultLayoutPluginInstance = defaultLayoutPlugin(); const { print } = defaultLayoutPluginInstance.toolbarPluginInstance.printPluginInstance;
- ๐จ You can customize the progress bar when preparing pages to print:
const printPluginInstance = printPlugin({ renderProgressBar: (numLoadedPages: number, numPages: number, onCancel: () => void) => ( // Render the progress bar ), });
๐ Improvement
- Replace the icons used in buttons to download and open a document with less confusing one
import { DownloadIcon } from '@react-pdf-viewer/get-file'; import { OpenFileIcon } from '@react-pdf-viewer/open';
๐ Bug fix
- Can't search or set the initial keyword for scanned documents
- ๐จ Allow to choose pages when printing a document via the
-
v3.5.0 Changes
๐ New feature
- Be able to customize the highlight elements when searching for a keyword:
const searchPluginInstance = searchPlugin({ renderHighlights: (highlightPositions: HighlightPosition[]) => ( // Your custom highlight elements ), });
๐ Improvements
๐ The highlight plugin supports double click. Users can double click to select the entire text of a given element
๐ The page navigation plugin allows to jump to the previous and next pages with shortcuts.
Shortcut Action PageUp
orAlt
+ArrowUp
Go to the previous page PageDown
orAlt
+ArrowDown
Go to the next page 0๏ธโฃ The shortcuts are enabled by default. It's possible to disable them, for example:
// Use the standalone page navigation plugin const pageNavigationPluginInstance = pageNavigationPlugin({ enableShortcuts: false, }); // Use the default layout plugin const defaultLayoutPluginInstance = defaultLayoutPlugin({ toolbarPlugin: { pageNavigationPlugin: { enableShortcuts: false, }, }, });
๐ Bug fixes
- Don't highlight the entire page when selecting multiple lines
- 0๏ธโฃ The default layout plugin throws an exception if the
setInitialTabFromPageMode
function returns aPromise
which resolves an invalid tab index - ๐ The highlight plugin throws an exception when double click a page without selecting any text
- ๐ The search plugin can't set the initial keyword when using with the highlight plugins
-
v3.4.0 Changes
๐ New feature
- It's possible to set the initial tab
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; const defaultLayoutPluginInstance = defaultLayoutPlugin({ // The `Bookmark` tab is active initially setInitialTab: () => Promise.resolve(1), });
According to the PDF specifications, the initial tab can be determined based on the document's page mode. If you want to follow that behaviour, then you can use the
setInitialTabFromPageMode
function:import { defaultLayoutPlugin, setInitialTabFromPageMode } from '@react-pdf-viewer/default-layout'; const defaultLayoutPluginInstance = defaultLayoutPlugin({ setInitialTab: setInitialTabFromPageMode, });
๐ Improvement
- Smooth scroll when jumping to a given page or destination (clicking a bookmark, for example)
๐ Bug fixes
- Can't add highlight to selected text
- Keep current position after zooming
-
v3.3.3 Changes
๐ Improvements
- Clicking
Enter
automatically jumps to the next match when being focused on the keyword field - โก๏ธ Support documents which are optimized for web. Users don't have to wait the full document loaded to see the first page.
๐ Bug fixes
- Automatically scroll to the thumbnail of the initial page when it's set
- ๐ The text might not be selectable if a plugin registers the
renderPageLayer
method - There is a page that is not rendered even it is visible when users zoom the document
- Clicking
-
v3.3.2 Changes
๐ Bug fixes
๐ Fix more issues that only happen with React 18's Strict mode:
- The
initialPage
option doesn't work - The pages are flickering when zooming the document
- There is a page that is not rendered even it is visible when users zoom the document continuously
- The
-
v3.3.1 Changes
๐ New feature
- ๐ The thumbnail plugin adds new option for customizing the width of thumbnails:
const thumbnailPluginInstance = thumbnailPlugin({ thumbnailWidth: 150, }); // Use with the default layout plugin const defaultLayoutPluginInstance = defaultLayoutPlugin({ thumbnailPlugin: { thumbnailWidth: 150, }, });
๐ Bug fix
- ๐ Support React 18 strict mode
<React.StrictMode> <Worker workerUrl="..."> <Viewer fileUrl="..." /> </Worker> </React.StrictMode>
-
v3.3.0 Changes
๐ New feature
- The
Bookmarks
component provides new property that can be used to set a bookmark expanded or collapsed initially. The following sample code expands bookmarks whose depth are smaller or equal to 2:
const setBookmarkExpanded = ({ bookmark, depth, doc, index }) => { // `bookmark` is the bookmark data structure // `depth` is the current depth // `doc` is the current document // `index` is the zero-based index of bookmark relative to its parent return depth <= 2; }; <Bookmarks isBookmarkExpanded={setBookmarkExpanded} />;
Expanding or collapsing all bookmarks initially can be done easily:
// Expand bookmarks initially const setBookmarkExpanded = ({ bookmark, depth, doc, index }) => true; // Collapse bookmarks initially const setBookmarkExpanded = ({ bookmark, depth, doc, index }) => false;
- ๐ The Page Navigation plugin provides new
NumberOfPages
component that displays the total number of pages
๐ Improvements
- Align bookmark titles
- Compatible with React 18
- 0๏ธโฃ In previous versions, all bookmarks were expanded by default. From this version, a bookmark will be shown or hidden initially depending on its data structure. You can see this behaviour on popular viewers such as Acrobat Reader.
- The toolbar slot
NumberOfPages
provides the ability of customizing the number of pages
๐ Bug fixes
- The hightlights are lost when the whole words option is enabled
- There is a visible page that isn't rendered when setting the zoom level as page width
- The