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.

[david-reactpdf]

Hi @xiaohanyu @siddarth @rc65 @dpodsobilov

I want to update that the feature to fully customize the toolbar will be released for a try as early as next week. Will keep you posted 🤩

[xiaohanyu]

Hi @xiaohanyu @siddarth @rc65 @dpodsobilov

I want to update that the feature to fully customize the toolbar will be released for a try as early as next week. Will keep you posted 🤩

Cannot wait to try this as soon as possible. Keep up the good job!

[david-reactpdf]

Hi @xiaohanyu @siddarth @rc65 @dpodsobilov, sorry for the delay!

We’ve just released v1.9.0 🎉 which includes RPLayout, RPHorizontalBar, and RPVerticalBar, giving you much greater flexibility to customize the toolbar and layout.

📦 Changelog: https://docs.react-pdf.dev/introduction/changelog/
🛠️ Customization guide: https://docs.react-pdf.dev/customization/customize-toolbar-new/

Appreciate your patience, and feel free to share any feedback if you get a chance to try it out!

[slobo]

@david-reactpdf is the source for the examples on the home page available anywhere? In particular we like the way search input is visible and how it does the de-bounced auto-search.

P.S. Thanks for the great library, we just got an org license 😁

[david-reactpdf]

@slobo

Thanks so much for the kind words, and really appreciate you getting the org license! 😄

We’ll add an example of that search input (with debounced auto-search) to our documentation soon and I’ll update you here once it’s ready. Let me know if there’s anything else you’d like to see.

[slobo]

@david-reactpdf Another example I'd like to see is how to add a custom toggle button to toolbar that matches the styling of other buttons. (Ex, currently we are employing useElementPageContext to add some elements to PDF, but would want to give the ability to users to hide the custom elements.)

Looking forward to that search tool example. Even if you just post the relevant section of source code of the home page, I can nib it from there.

Sidenote: in https://docs.react-pdf.dev/components/rp-horizontal-bar/#rphorizontalbarslots, the zoomTool is typed as boolean, but I think in reality it's boolean | FC<ZoomProps>

Thanks