@react-pdf-viewer/core 2.6.0

v2.6.0: Theming

on Node.js Yarn

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:

• 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 changes

• 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