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

Changelog History
Page 1

  • v2.9.2 Changes

    ๐Ÿ†• New feature

    • ๐Ÿ”Œ 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

    ๐Ÿ‘Œ Improvements

    • ๐Ÿ–จ Disable the printing functionality if the document doesn't allow to print
    • Show the page labels if there are

    ๐Ÿ› 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
  • v2.9.1 Changes

    ๐Ÿ‘Œ Improvement

    ๐Ÿ‘€ As we know, the Viewer component only renders the pages which are visible in the screen. For an invisible page, users will see a spinner. However, the animation used in the Spinner component can slow down the app if the document has a big number of pages.

    ๐ŸŽ This version improves the performance by animating the Spinner component when it's visible only.

  • 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