Open plugin

The `open` plugin provides a button that can be used to open a PDF document in your computer. It is possible to customize the button as well.

Install

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

Usage

1. Import the plugin and styles
import { openPlugin } from '@react-pdf-viewer/open';
// Import styles
import '@react-pdf-viewer/open/lib/styles/index.css';
2. Create the plugin instance
const openPluginInstance = openPlugin(props?: OpenPluginProps);
The `openPlugin()` function takes an optional `OpenPluginProps` parameter that consists of the following property:
(? denotes an optional property)
PropertyTypeDescriptionFrom
`enableShortcuts`?`boolean`Enable shortcuts2.9.0
By default, the shortcuts are enabled. Users can press `ctrl + O` to open a document.
The plugin instance `openPluginInstance` provides the following properties:
PropertyTypeDescriptionFrom
`Open``ReactElement`Customizable open button2.0.0
`OpenButton``ReactElement`The default open button2.0.0
`OpenMenuItem``ReactElement`The default open menu item2.5.0
3. Register the plugin
Register the `open` plugin instance:
<Viewer plugins={[openPluginInstance]} />

Properties

The `open` plugin provides other useful property as following:
import { OpenFileIcon } from '@react-pdf-viewer/open';
PropertyTypeDescriptionFrom
`OpenFileIcon``ReactElement`The open file icon2.0.0

See also

Changelog

v2.9.0
  • Support shortcuts
v2.4.1
  • The `Open file button` covers other elements, so we can't click on the Download or Print buttons. This issue only happens on Safari 14
v2.0.0
  • First release