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:
(? denotes an optional property)
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
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,
]}
/>
</>
);

See also