Example: Create a toolbar with more options

As mentioned in the Toolbar plugin page, the function of creating new toolbar plugin instance takes an optional ToolbarPluginProps parameter:

const toolbarPluginInstance = toolbarPlugin(props?: ToolbarPluginProps);

ToolbarPluginProps represents an object of the following properties:

?: Optional

PropertyTypeDescriptionFrom
fullScreenPlugin?FullScreenPluginPropsThe options of Full Sceen plugin2.3.1
getFilePlugin?GetFilePluginPropsThe options of Get File plugin2.0.0
searchPlugin?SearchPluginPropsThe options of Search plugin2.0.0
selectionModePlugin?SelectionModePluginPropsThe options of Selection Mode plugin2.0.0

The sample code below creates a toolbar that

  • generates a custom file name when clicking the download button
  • sets the initial keyword as PDF that is highlighted in all pages
  • sets the selection mode to SelectionMode.Hand
import { OpenFile, Viewer } from '@react-pdf-viewer/core';
import { SelectionMode } from '@react-pdf-viewer/selection-mode';
import { toolbarPlugin } from '@react-pdf-viewer/toolbar';

const toolbarPluginInstance = toolbarPlugin({
    getFilePlugin: {
        fileNameGenerator: (file: OpenFile) => {
            const fileName = file.name.substring(file.name.lastIndexOf('/') + 1);
            return `a-copy-of-${fileName}`;
        }
    },
    searchPlugin: {
        keyword: 'PDF'
    },
    selectionModePlugin: {
        selectionMode: SelectionMode.Hand
    },
});
const { Toolbar } = toolbarPluginInstance;

// Your render function
return (
    <div>
        /* Toolbar */
        <Toolbar />

        /* Main viewer */
        <Viewer
            fileUrl='/assets/pdf-open-parameters.pdf'
            plugins={[
                toolbarPluginInstance,
            ]}
        />
    </>
);

(The sample code)

/ 0
0%

Related examples