Docs
Plugins
Localizations
Examples
Updates
Purchase
Plugins

Toolbar plugin

The `toolbar` plugin combines different parts provided by other plugins such as

Install

npm install '@react-pdf-viewer/toolbar';
The `toolbar` plugin is included in the default-layout plugin

Usage

1. Import the plugin and styles
import { toolbarPlugin } from '@react-pdf-viewer/toolbar';


// Import styles
import '@react-pdf-viewer/toolbar/lib/styles/index.css';
2. Create the plugin instance
const toolbarPluginInstance = toolbarPlugin(props?: ToolbarPluginProps);
See the Create a toolbar with more options example for more details about `ToolbarPluginProps`.
The plugin instance `toolbarPluginInstance` provides the following property:
PropertyTypeDescriptionFrom
`Toolbar``ReactElement`The default toolbar2.0.0
`fullScreenPluginInstance``FullScreenPlugin`The instance of the Full Screen plugin2.4.0
`getFilePluginInstance``GetFilePlugin`The instance of the Get File plugin2.4.0
`openPluginInstance``OpenPlugin`The instance of the Open plugin2.4.0
`pageNavigationPluginInstance``PageNavigationPlugin`The instance of the Page Navigation plugin2.4.0
`printPluginInstance``PrintPlugin`The instance of the Print plugin2.4.0
`propertiesPluginInstance``PropertiesPlugin`The instance of the Properties plugin2.4.0
`renderDefaultToolbar``Function`Render a custom toolbar based on the default toolbar. See this example2.10.0
`rotatePluginInstance``RotatePlugin`The instance of the Rotate plugin2.4.0
`scrollModePluginInstance``ScrollModePlugin`The instance of the Scroll Mode plugin2.4.0
`searchPluginInstance``SearchPlugin`The instance of the Search plugin2.4.0
`selectionModePluginInstance``SelectionModePlugin`The instance of the Selection Mode plugin2.4.0
`themePluginInstance``ThemePlugin`The instance of the Theme plugin2.6.0
`zoomPluginInstance``ZoomPlugin`The instance of the Zoom plugin2.4.0
3. Register the plugin
Register the `toolbar` plugin instance:
<Viewer plugins={[toolbarPluginInstance]} />

Properties

The `toolbar` plugin provides other useful property as following:
import { MoreIcon } from '@react-pdf-viewer/toolbar';
PropertyTypeDescriptionFrom
`MoreIcon``ReactElement`The three vertical dots icon2.0.0

See also

Changelog

v3.7.0
  • The page navigation options are missing when creating a toolbar plugin
v3.3.0
  • The toolbar slot `NumberOfPages` provides the ability of customizing the number of pages
v3.1.2
  • The `ScrollModePluginProps` type isn't defined in the type definitions
v3.0.0
  • Add `data-testid` attribute to buttons in the toolbar
  • The number of pages slot `<NumberOfPages />` isn't correct when using the `renderToolbar`
v2.10.0
  • Add new `renderDefaultToolbar` function
v2.9.0
  • The plugin instances which can be accessed from an instance of the Toolbar plugin should be readonly
v2.6.1
  • Fix an issue that the plugin can cause a re-render
  • Remove duplicate borders of keyword input
  • Search results are not highlighted
v2.6.0
  • The plugin doesn't include the drop plugin anymore
  • The toolbar `Slot` has new `SwitchTheme` and `SwitchThemeMenuItem` components
v2.4.0
  • Provide the accesses to the instance of other plugins that build the toolbar
  • Fix the type definitions of the `MoreActionsPopover` component
v2.0.0
  • First release
ThumbnailZoom