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`?`FullScreenPluginProps`The options of Full Sceen plugin2.3.1
`getFilePlugin`?`GetFilePluginProps`The options of Get File plugin2.0.0
`searchPlugin`?`SearchPluginProps`The options of Search plugin2.0.0
`selectionModePlugin`?`SelectionModePluginProps`The 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