All Versions
52
Latest Version
Avg Release Cycle
20 days
Latest Release
-

Changelog History
Page 3

  • v2.9.0 Changes

    🆕 New features

    • 📦 The core package provides new Splitter component
    • 🔌 The thumbnail plugin provides new Cover component that shows the thumbnail of a particular page:
    const { thumbnailPluginInstance } = thumbnailPlugin();
const { Cover } = thumbnailPluginInstance;

// Thumbnail of the first page
<Cover getPageIndex={_ => 0} />

// Thumbnail of the last page
<Cover getPageIndex={props => props.numPages - 1} />
    • Add new onDocumentAskPassword event that is triggered when a protected document requires a password to open:
    const handleAskPassword = (e: DocumentAskPasswordEvent) => {
    // ...
};

<Viewer onDocumentAskPassword={handleAskPassword} />;

    👌 Improvements

    • Automatically focus on the keyword input in the search popover
    • Press Enter to submit the password when opening a protected document
    • Show the page numbers for thumbnails
    • 0️⃣ The Default Layout plugin allows to resize the sidebar
    • 0️⃣ The plugin instances which can be accessed from an instance of the Default Layout or Toolbar plugin should be readonly
    • 👍 Support more shortcuts

    🔌 | Shortcut | Supported plugin | Action | | ----------------------------------------------------------------- | ---------------------------------------------------------------- | -------------------------- | 🔌 | ctrl + cmd + F or F11 | Full screen | Enter the full screen mode | 🔌 | cmd + O | Open | Open a document | 🔌 | cmd + F | Search | Open the search popover |

    0️⃣ The shortcuts are enabled by default. It's possible to disable them, for example:

    // Use the standalone open plugin
const openPluginInstance = openPlugin({
    enableShortcuts: false,
});

// Use the default layout plugin
const defaultLayoutPluginInstance = defaultLayoutPlugin({
    toolbarPlugin: {
        openPlugin: {
            enableShortcuts: false,
        },
    },
});

  • v2.8.0 Changes

    🆕 New features

    • 👍 Support RTL
    import { TextDirection, Viewer } from '@react-pdf-viewer/core';

<Viewer
    theme={{
        direction: TextDirection.RightToLeft,
    }}
/>;
    • The RenderViewer type includes the theme context

    🐛 Bug fixes

    • The highlighting elements should be shown below the text, so users can still select the text
    • 👻 There is an exception when opening a password protected document

  • v2.7.2 Changes

    🆕 New feature

    🔌 The Search plugin provides new function named setTargetPages which sets the pages that you want to search in.

    import { searchPlugin } from '@react-pdf-viewer/search';

const searchPluginInstance = searchPlugin();
const { setTargetPages } = searchPluginInstance;

// Only search in even pages
setTargetPages((targetPage) => targetPage.pageIndex % 2 === 0);

// Only search in the page 4
setTargetPages((targetPage) => targetPage.pageIndex === 3);

    👌 Improvements

    • Allow to change the theme from outside of the Viewer component
    • 0️⃣ When the default scale is set to a special zoom level, we should keep it when resizing the window
    • 🔌 The onDocumentLoad event and plugins' PluginOnDocumentLoad callback provide access to the current opened file which contains the data and name properties:
    const handleDocumentLoad = (e: DocumentLoadEvent) => {
    console.log(e.file.name, e.file.data);
};

<Viewer onDocumentLoad={handleDocumentLoad} />;

    🐛 Bug fixes

    • 💻 Can't close the menu when using with the Fluent UI
    • 0️⃣ The activateTab() method provided by the default layout plugin shouldn't toggle the tab
    • ⚡️ The LocalePopover component doesn't update the localization
    • 0️⃣ The pages' container overflows on initial render when setting the default scale to SpecialZoomLevel.PageWidth

  • v2.7.1 Changes

    👌 Improvement

    Continue improving the accessibility:

    Component Press key Action
    Menu End Focus on the last menu item
    Home Focus on the first menu item

    🐛 Bug fixes

    • Automatically scroll to the top of page when opening a menu
    • Fix the warning when pressing the Escape key to close a modal

  • v2.7.0 Changes

    🆕 New features

    • Add new onSwitchTheme option that allows to track if users switch theme. The following snippet demonstrates an example that the current theme is stored in the local storage, and is loaded back in the next user's visit:
    const handleSwitchTheme = (theme: string) => {
    localStorage.setItem('theme', theme);
};
const theme = localStorage.getItem('theme') || 'light';

<Viewer theme={theme} onSwitchTheme={handleSwitchTheme} />;

    👌 Improve the search plugin

    • Add new jumpToMatch function which jumps to the given match

    • The highlight function now returns a Promise that holds the results. Each result also contains the matching text

    • 📦 The core package provides isMac function

    👌 Improvements

    Accessibility

    • Add ARIA attributes to Icon, Menu, MenuDivider, MenuItem, MinimalButton, Modal, Popover, TextBox, Tooltip components
    • Add ARIA attributes to pages and thumbnails
    • Add ARIA attributes to internal links of the document
    • When the shortcuts are enabled, the associal buttons will have the aria-keyshortcuts attributes
    • Use the keyboard to navigate between components:
    Component Press key Action
    Attachments ArrowDown Focus on the next attachment
    ArrowUp Focus on the previous attachment
    End Focus on the last attachment
    Enter Download the current focused attachment
    Home Focus on the first attachment
    Bookmark ArrowDown Focus on the next bookmark
    ArrowLeft Collapse the current bookmark
    ArrowRight Expand the current bookmark
    ArrowUp Focus on the previous bookmark
    End Focus on the last bookmark
    Enter Click the current focused bookmark
    Home Focus on the first bookmark
    Space Click the current focused bookmark
    Menu ArrowDown Focus on the next menu item
    ArrowUp Focus on the previous menu item
    Enter Click the current focused item
    Thumbnails ArrowDown Focus on the thumbnail of next page
    ArrowUp Focus on the thumbnail of the previous page
    Enter Jump to the associate page
    Tooltip Escape Close
    Tab Show when being focused
    Close when being blured
    • Add a background color to the current search highlight
    • Show a loading indicator while searching for a keyword
    • The Spinner component adds new size property

    🐛 Bug fixes

    • Custom search control isn't rendered
    • Pressing shortcuts effects all viewer instances in the same page. The shortcuts should be enabled when the viewer gets focused.
    • 🚚 Remove br elements generated by the recent versions of pdf.js before rendering the text layer
    • 🚚 Remove keyCode usages because it's deprecated
    • 🖨 The print progress container loses the border
    • The search popover isn't shown until the document is loaded

  • v2.6.2 Changes

    👌 Improvements

    • Add WAI-ARIA attributes to Icon, Menu, MenuDivider, MenuItem, MinimalButton, Modal, Popover, TextBox, Tooltip components
    • ➕ Add ARIA attributes to pages and thumbnails
    • ➕ Add ARIA attributes to internal links of the document
    • 👌 Improve the accessibility of the Tooltip component
      • Shown when being focused
      • Closed when being blured
      • Closed when pressing the Escape key
    • 👌 Improve the accessibility of the Menu component
      • Activate the next menu item when pressing the ArrowDown key
      • Activate the previous menu item when pressing the ArrowUp key
    • 👌 Improve the accessibility of the list of thumbnails
      • Focus on the previous or next thumbnail using the ArrowUp and ArrowDown key
    • When the shortcuts are enabled, the associal buttons will have the aria-keyshortcuts attributes

  • v2.6.1 Changes

    👌 Improvements

    • 🚚 Move the CSS variables of the default theme to :root, so we can use components (Button, Menu, Tooltip, etc.) outside of the Viewer
    • ⚡️ Update the DownloadIcon, ExitFullScreenIcon, FullScreenIcon and OpenFileIcon icons

    🐛 Bug fixes

    • 🚚 Remove duplicate borders of keyword input
    • Search results are not highlighted
    • 🔌 The Search plugin can cause a re-render

  • v2.6.0 Changes

    💅 From this version, all the components use the BEM naming convention for CSS classes. So if you override the styles of given class, you need to change the class.

    📦 The CSS classes are named as rpv-PACKAGE__COMPONENT, rpv-PACKAGE__COMPONENT--STATE. For example:

    /* Old version */
.rpv-search-highlight {
    ...;
}
.rpv-search-highlight-current {
    ...;
}

/* From v2.6.0 */
.rpv-search__highlight {
    ...;
}
.rpv-search__highlight--current {
    ...;
}

    🆕 New features

    • 📦 The core package provides new TextBox component
    • 👍 Support themes. You can create a custom theme with new theme option:
    <Viewer theme="bootstrap" />

    🔌 The main viewer then will have the class rpv-core__viewer--bootstrap. You can set the value for CSS variables which are provided by plugins:

    .rpv-core__viewer--bootstrap {
    /* Custom the background color of toolbar in the default layout */
    --rpv-default-layout__toolbar-background-color: #eee;
}

    The following built-in themes are provided:

    Theme                     Description
    <Viewer theme='auto' /> Switch to the dark or light mode automatically based on the system setting
    <Viewer theme='dark' /> The dark theme
    0️⃣ <Viewer theme='light' />
    0️⃣ <Viewer theme='' />
    • 🔌 Add new theme plugin that provides components for switching between the dark and light themes
    • The toolbar Slot has new SwitchTheme and SwitchThemeMenuItem

    👌 Improvements

    • Tweak toggle icons in bookmark items
    • 🔌 The bookmark plugin provide new icons: DownArrowIcon and RightArrowIcon
    • 🔌 Improve text selection in the highlight plugin
    • 🔌 You can enable or disable shortcuts in the print and zoom plugins:
    const printPluginInstance = printPlugin({
    // The shortcuts are enabled by default
    enableShortcuts: false,
});

const zoomPluginInstance = zoomPlugin({
    // The shortcuts are enabled by default
    enableShortcuts: false,
});

    🐛 Bug fixes

    • Can't close popovers after scrolling
    • 🖨 Can't open any popover after printing
    • Icons in menu items aren't centered horizontally
    • 👻 There is an exception when jumping to the next or previous match if the keyword isn't found

    💥 Breaking change

    • 🔌 The toolbar plugin doesn't include the drop plugin anymore. In order to use the drop plugin, you have to register it
    • Button is renamed to MinimalButton
    • 🚚 The option prefixClass is removed

  • v2.5.0 Changes

    🆕 New features

    • 📱 The default layout is responsive in different screen sizes
    • You can add more options that will be passed to the pdf.js getDocument API:
    <Viewer
    fileUrl="..."
    transformGetDocumentParams={(options: PdfJs.GetDocumentParams) =>
        Object.assign({}, options, {
            disableRange: false,
            disableStream: false,
        })
    }
/>
    • Provide more reusable components:

    🔌 | Component                     | Provided by plugin                                                         | Description                   | | ------------------------------ | -------------------------------------------------------------------------- | ------------------------------ | 🔌 | DownloadMenuItem             | Get File                 | Download the current file     | 🔌 | EnterFullScreenMenuItem     | Full screen           | Enter the full screen mode     | 🔌 | GoToNextPageMenuItem         | Page Navigation   | Go to the next page           | 🔌 | GoToPreviousPageMenuItem     | Page Navigation   | Go to the previous page       | 🔌 | OpenMenuItem                 | Open                         | Open a new file               | 🔌 | PrintMenuItem               | Print                       | Print the current file         | 🔌 | ZoomInMenuItem               | Zoom                         | Zoom in the current file       | 🔌 | ZoomOutMenuItem             | Zoom                         | Zoom out the current file     |

    🔌 These components are available as Toolbar slots, so it's possible to add them to a custom toolbar

    👌 Improvements

    • 0️⃣ Decrease the number of renders from twice to once when setting the default scale
    • The Button and MenuItem components have disabled state. For example, the button for going to the first page will be disabled if we're at the first page
    • The icons use the current color instead of hard coded one. It's easier for us to create themes

    🐛 Bug fixes

    • Doesn't work with NextJS because navigator isn't defined
    • Some bookmarks are hidden initially
    • 0️⃣ The initialPage and defaultScale options don't work together
    • There are big spaces between thumbnails
    • Zoom the document best inside the container initially

    💥 Breaking changes

    • If you are creating a custom toolbar or buttons to go to particular pages, then the following props are renamed:
    Old name                       New name              
    GoToFirstPageProps           GoToPageProps      
    GoToLastPageProps           GoToPageProps      
    GoToNextPageProps           GoToPageProps      
    GoToPreviousPageProps       GoToPageProps      
    RenderGoToFirstPageProps     RenderGoToPageProps
    RenderGoToLastPageProps     RenderGoToPageProps
    RenderGoToNextPageProps     RenderGoToPageProps
    RenderGoToPreviousPageProps RenderGoToPageProps

  • v2.4.3 Changes

    🐛 Bug fix

    • Clicking on an internal link jumps to an incorrect page (one page after the destination one)

    👌 Improvements

    • Automatically scroll to the thumbnail that represents the current page
    • 🖨 Display the progress properly when printing a big document
    • 🐎 Improve the performance of preparing pages for print such as using a shared canvas element for all pages
    • Keep showing a spinner until the canvas layer is rendered completely
    • 🔌 The print plugin supports documents whose pages have different dimensions