« Changelog History


React PDF viewer v3.8.0 Release Notes

  • 🆕 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 new path 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 of

    Property 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 new isDocumentLoaded 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 and title 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 and endPageIndex properties of SelectionData 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. The SelectionData property in RenderHighlightContentProps and RenderHighlightTargetProps 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 ...
}