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.

[siddarth]

+1 this would be great to support, and what's preventing us from using this library right now.

[rc65]

I see this has been added to the roadmap at the top of the changelog: https://docs.react-pdf.dev/introduction/changelog

[david-reactpdf]

@xiaohanyu @siddarth @rc65

Thanks for all the thoughtful input and examples!

We’re currently exploring support for a fully customizable Top Bar, and your use cases are super helpful as we shape the direction.

To make sure we’re building what you actually need, a few quick questions:

1. Do you want to be able to rearrange existing Top Bar functions (like Zoom, Download, etc.) without rebuilding the whole layout?

2. Would you need the ability to add your own custom buttons/tools anywhere in the Top Bar with custom onClick handlers?
3. Do you need access to functions that are currently in 'More Options' menu (e.g., Rotate) into the Top Bar?
4. Are there cases where you’d want to use Top Bar functions (like Download or Fullscreen) in the left sidebar?
   Appreciate any thoughts you can share, it’ll help us build a more flexible system without overcomplicating the base layout.

Thanks in advance for the feedbacks!

[xiaohanyu]

To make sure we’re building what you actually need, a few quick questions:

1. Do you want to be able to rearrange existing Top Bar functions (like Zoom, Download, etc.) without rebuilding the whole layout?

Yes

2. Would you need the ability to add your own custom buttons/tools anywhere in the Top Bar with custom onClick handlers?

Yes

3. Do you need access to functions that are currently in 'More Options' menu (e.g., Rotate) into the Top Bar?

Maybe

4. Are there cases where you’d want to use Top Bar functions (like Download or Fullscreen) in the left sidebar?

Yes sometimes I may want to move some buttons from right to left, just to make toolbar more "balanced".

The ideal case:

1. I can re-use all built-in functionabilities from the current react-pdf, because it is well done and well tested and I don't want to build these things by myself
2. I want to have the ability to add a custom button with custom onClick
3. I want to re-order the buttons in toolbar with any order

Thank you!

[dpodsobilov]

Hello!
I would like to suggest one moer customisation for the toolbar.

I would like to be able to choose whether a button appears in the ‘More Options’ menu or remains in the main row. For example, I would like to be able to move the document rotation buttons to the toolbar so that they never appear in the ‘More Options’ drop-down menu.