`toolbar`
plugin combines different parts provided by other plugins such asnpm install '@react-pdf-viewer/toolbar';
`toolbar`
plugin is included in the default-layout pluginimport { toolbarPlugin } from '@react-pdf-viewer/toolbar';// Import stylesimport '@react-pdf-viewer/toolbar/lib/styles/index.css';
const toolbarPluginInstance = toolbarPlugin(props?: ToolbarPluginProps);
`ToolbarPluginProps`
.`toolbarPluginInstance`
provides the following property:Property | Type | Description | From |
---|---|---|---|
`Toolbar` | `ReactElement` | The default toolbar | 2.0.0 |
`fullScreenPluginInstance` | `FullScreenPlugin` | The instance of the Full Screen plugin | 2.4.0 |
`getFilePluginInstance` | `GetFilePlugin` | The instance of the Get File plugin | 2.4.0 |
`openPluginInstance` | `OpenPlugin` | The instance of the Open plugin | 2.4.0 |
`pageNavigationPluginInstance` | `PageNavigationPlugin` | The instance of the Page Navigation plugin | 2.4.0 |
`printPluginInstance` | `PrintPlugin` | The instance of the Print plugin | 2.4.0 |
`propertiesPluginInstance` | `PropertiesPlugin` | The instance of the Properties plugin | 2.4.0 |
`renderDefaultToolbar` | `Function` | Render a custom toolbar based on the default toolbar. See this example | 2.10.0 |
`rotatePluginInstance` | `RotatePlugin` | The instance of the Rotate plugin | 2.4.0 |
`scrollModePluginInstance` | `ScrollModePlugin` | The instance of the Scroll Mode plugin | 2.4.0 |
`searchPluginInstance` | `SearchPlugin` | The instance of the Search plugin | 2.4.0 |
`selectionModePluginInstance` | `SelectionModePlugin` | The instance of the Selection Mode plugin | 2.4.0 |
`themePluginInstance` | `ThemePlugin` | The instance of the Theme plugin | 2.6.0 |
`zoomPluginInstance` | `ZoomPlugin` | The instance of the Zoom plugin | 2.4.0 |
`toolbar`
plugin instance:<Viewer plugins={[toolbarPluginInstance]} />
`toolbar`
plugin provides other useful property as following:import { MoreIcon } from '@react-pdf-viewer/toolbar';
Property | Type | Description | From |
---|---|---|---|
`MoreIcon` | `ReactElement` | The three vertical dots icon | 2.0.0 |
`NumberOfPages`
provides the ability of customizing the number of pages`ScrollModePluginProps`
type isn't defined in the type definitions`data-testid`
attribute to buttons in the toolbar`<NumberOfPages />`
isn't correct when using the `renderToolbar`
`renderDefaultToolbar`
function`Slot`
has new `SwitchTheme`
and `SwitchThemeMenuItem`
components`MoreActionsPopover`
component