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

Changelog History
Page 2

  • v3.0.0 Changes

    ๐Ÿ†• New features

    • โœ… Add new testId property to MenuItem, 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 default Spinner 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 new renderThumbnailItem 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 the renderToolbar
    • ๐Ÿ‘ป There is an exception of React has detected a change in the order of Hooks when switching documents
  • v2.11.0 Changes

    ๐Ÿ†• New features

    • โœ… The Button component has new testId property that is identical with the data-testid attribute
    • ๐Ÿ”Œ The Scroll Mode plugin provides new function to switch mode programmatically:
    const scrollModePluginInstance = scrollModePlugin();
    const { switchScrollMode } = scrollModePluginInstance;
    
    // Switch to Wrapped mode
    switchScrollMode(ScrollMode.Wrapped);
    

    ๐Ÿ”Œ You might find it useful when using with the full screen plugin. The following sample code switches the scroll mode after entering the full screen mode:

    const defaultLayoutPluginInstance = defaultLayoutPlugin({
        toolbarPlugin: {
            fullScreenPlugin: {
                onEnterFullScreen: (zoom) => {
                    zoom(SpecialZoomLevel.PageFit);
                    defaultLayoutPluginInstance.toolbarPluginInstance.scrollModePluginInstance.switchScrollMode(
                        ScrollMode.Wrapped
                    );
                },
                onExitFullScreen: (zoom) => {
                    zoom(SpecialZoomLevel.PageWidth);
                    defaultLayoutPluginInstance.toolbarPluginInstance.scrollModePluginInstance.switchScrollMode(
                        ScrollMode.Horizontal
                    );
                },
            },
        },
    });
    

    ๐Ÿ‘Œ Improvements

    • ๐Ÿ‘€ Cache pages' labels. So we won't see blink in the current page label when navigating between pages
    • Keep the file name when downloading a file opened from local
    • ๐Ÿšš It's possible to remove the sidebar created by the default layout plugin:
    const defaultLayoutPluginInstance = defaultLayoutPlugin({
        sidebarTabs: () => [],
    });
    

    ๐Ÿ› Bug fixes

    • Can't use special characters such as (, ), [, ], * in the keyword
    • Downloading document doesn't work on iOS Safari and iOS Chrome
    • ๐Ÿ”Œ The Get File plugin doesn't work with a file which is opened with credentials
    • The highlight area aren't displayed
    • The selectedText prop of RenderHighlightContentProps isn't correct
  • v2.10.1 Changes

    ๐Ÿ†• New feature

    • ๐Ÿ”Œ The Zoom and ZoomPopover components provided by the zoom plugin adds a custom zoom levels
    <Zoom levels={[0.5, 1, 2, 3, 4]} />
    
    <ZoomPopover levels={[0.5, 1, 2, 3, 4]} />
    

    ๐Ÿ› Bug fix

    • Clicking the Search button scrolls to the top of page
  • v2.10.0 Changes

    ๐Ÿ†• New features

    • ๐Ÿ”Œ 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
    • ๐Ÿ”Œ The render props of the CurrentPageLabel component provided by the Page Navigation plugin includes new pageLabel property. It is useful if the page has a label that isn't the same as its page number:
    const { CurrentPageLabel } = pageNavigationPluginInstance;
    
    <CurrentPageLabel>
        {(props) => (
            <>
                {props.numberOfPages}
                {props.pageLabel !== `${props.currentPage + 1}` && `(${props.pageLabel})`}
            </>
        )}
    </CurrentPageLabel>;
    
    • The Thumbnails component displays the page labels if there are. You also can customize the page labels:
    const thumbnailPluginInstance = thumbnailPlugin({
        renderCurrentPageLabel: (props) => (
            <>
                {props.pageIndex + 1}
                {props.pageLabel !== `${props.pageIndex + 1}` && `(${props.pageLabel})`}
            </>
        ),
    });
    const { Thumbnails } = thumbnailPluginInstance;
    
    <Thumbnails />;
    
    • 0๏ธโƒฃ The Toolbar plugin provides the renderDefaultToolbar function to create a custom toolbar from the default toolbar easily. The following sample code prepends of to the NumberOfPages component:
    import type { ToolbarSlot, TransformToolbarSlot } from '@react-pdf-viewer/toolbar';
    
    const { renderDefaultToolbar, Toolbar } = toolbarPluginInstance;
    
    const transform: TransformToolbarSlot = (slot: ToolbarSlot) => {
        const { NumberOfPages } = slot;
        return Object.assign({}, slot, {
            NumberOfPages: () => (
                <>
                    of <NumberOfPages />
                </>
            ),
        });
    };
    
    // Render the toolbar
    <Toolbar>{renderDefaultToolbar(transform)}</Toolbar>;
    

    ๐Ÿ‘Œ Improvement

    • ๐Ÿ–จ Disable the printing functionality if the document doesn't allow to print

    ๐Ÿ› 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.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