Toolbar plugin

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

Install

npm install '@react-pdf-viewer/toolbar';

Usage

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

// Import styles
import '@react-pdf-viewer/toolbar/lib/styles/index.css';
  • 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
ToolbarReactElementThe default toolbar2.0.0
fullScreenPluginInstanceFullScreenPluginThe instance of the Full Screen plugin2.4.0
getFilePluginInstanceGetFilePluginThe instance of the Get File plugin2.4.0
openPluginInstanceOpenPluginThe instance of the Open plugin2.4.0
pageNavigationPluginInstancePageNavigationPluginThe instance of the Page Navigation plugin2.4.0
printPluginInstancePrintPluginThe instance of the Print plugin2.4.0
propertiesPluginInstancePropertiesPluginThe instance of the Properties plugin2.4.0
rotatePluginInstanceRotatePluginThe instance of the Rotate plugin2.4.0
scrollModePluginInstanceScrollModePluginThe instance of the Scroll Mode plugin2.4.0
searchPluginInstanceSearchPluginThe instance of the Search plugin2.4.0
selectionModePluginInstanceSelectionModePluginThe instance of the Selection Mode plugin2.4.0
themePluginInstanceThemePluginThe instance of the Theme plugin2.6.0
zoomPluginInstanceZoomPluginThe instance of the Zoom plugin2.4.0
  • Finally, register the toolbar plugin instance:
<Viewer
    fileUrl='...'
    plugins={[
        toolbarPluginInstance,
    ]}
/>

Properties

The toolbar plugin provides other useful property as following:

import { MoreIcon } from '@react-pdf-viewer/toolbar';
PropertyTypeDescriptionFrom
MoreIconReactElementThe three vertical dots icon2.0.0

Examples