Feature request: fully customized toolbar

[xiaohanyu]

Hello,

For now react-pdf supports replacing toolbar icons via RPSlot, however, the position of slots seems to be fixed—though you can hide some slots.

Also it is not possible to add a new customized button/icon with customized onClick function to the toolbar.

react-pdf-viewer support a flexible renderToolbar function which supports fully customized toolbar, could react-pdf support this as well, I mean, builtin support? Otherwise we have to get rid of the RPDefaultLayout completely and re-implement a new toolbar by ourselves right?

Thanks.

[david-reactpdf]

@xiaohanyu

Thanks for the detailed suggestion!

Just to make sure we’re aligned, are you looking to keep the existing RPDefaultLayout toolbar, but also have the ability to add custom buttons/icons in specific positions and attach your own event handlers (like onClick)?

[xiaohanyu]

@xiaohanyu

Thanks for the detailed suggestion!

Just to make sure we’re aligned, are you looking to keep the existing RPDefaultLayout toolbar, but also have the ability to add custom buttons/icons in specific positions and attach your own event handlers (like onClick)?

Yes, I don't want to implement a new toolbar from scratch at all, instead, I want to re-use 80% of the functionalities from official react-pdf, and then just add one or two customized buttons, with re-positioned icons in toolbar layout.

---

Fix, I think I pasted the wrong link in my post for renderToolbar. Here it is: https://react-pdf-viewer.dev/examples/create-a-toolbar-with-different-slots-for-the-default-layout/.

The code is something like this:

const renderToolbar = (Toolbar: (props: ToolbarProps) => ReactElement) => (
    <Toolbar>
        {(slots: ToolbarSlot) => {
            const {
                CurrentPageInput,
                Download,
                EnterFullScreen,
                GoToNextPage,
                GoToPreviousPage,
                NumberOfPages,
                Print,
                ShowSearchPopover,
                Zoom,
                ZoomIn,
                ZoomOut,
            } = slots;
            return (
                <div
                    style={{
                        alignItems: 'center',
                        display: 'flex',
                        width: '100%',
                    }}
                >
                    <div style={{ padding: '0px 2px' }}>
                        <ShowSearchPopover />
                    </div>
                    <div style={{ padding: '0px 2px' }}>
                        <ZoomOut />
                    </div>
                    <div style={{ padding: '0px 2px' }}>
                        <Zoom />
                    </div>
                    <div style={{ padding: '0px 2px' }}>
                        <ZoomIn />
                    </div>
                    <div style={{ padding: '0px 2px', marginLeft: 'auto' }}>
                        <GoToPreviousPage />
                    </div>
                    <div style={{ padding: '0px 2px' }}>
                        <CurrentPageInput /> / <NumberOfPages />
                    </div>
                    <div style={{ padding: '0px 2px' }}>
                        <GoToNextPage />
                    </div>
                    <div style={{ padding: '0px 2px', marginLeft: 'auto' }}>
                        <EnterFullScreen />
                    </div>
                    <div style={{ padding: '0px 2px' }}>
                        <Download />
                    </div>
                    <div style={{ padding: '0px 2px' }}>
                        <Print />
                    </div>
                </div>
            );
        }}
    </Toolbar>
);

const defaultLayoutPluginInstance = defaultLayoutPlugin({
    renderToolbar,
});

So mostly you can re-use functionalities from official, but if you like, you can add cutomized buttons with your own onClick and position it anywhere in the array.