Custom render function for toggle devtools button

[SpadarShut]

I need to put the toggle devtools button in a special tray where some other buttons are residing already.
So I'd like to use a render function for the toggle button to be able to put it in my container using a portal.
Actually I've done the code already, but guidelines ask for a ticket first, hence writing this.
Would authors approve such a feature?

[TkDodo]

the devtools accept a toggleButtonProps prop to style the button.

[SpadarShut]

@TkDodo Yes, but toggleButtonProps cannot put the button in a custom container :/

[TkDodo]

all right, but how would render props work together with toggleButtonProps. FYI, you can also import the ReactQueryDevtoolsPanel, which is the floating version, and open that from whatever button you want.

[SpadarShut]

This would be basically this:

// move all button props to a variable
  const toggleButtonRenderProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {
    type: 'button',
    ...otherToggleButtonProps,
    'aria-label': 'Open React Query Devtools',
    'aria-controls': 'ReactQueryDevtoolsPanel',
    'aria-haspopup': true,
    'aria-expanded': false,
    onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
      setIsOpen(true)
      onToggleClick && onToggleClick(e)
    },
    style: {
      background: 'none',
      [...]
      ...toggleButtonStyle,
    },
    children: <Logo aria-hidden />
  }
// and later in render:
       {
        typeof renderToggleButton === 'function' ?
          renderToggleButton(toggleButtonRenderProps) :
          !isResolvedOpen ? (
            <button {...toggleButtonRenderProps} />
          ) : null}

[TkDodo]

so we would pass that prop to the render function. yeah, that sounds good to me. Do you want to contribute that? Let's just make sure to do it for the close button as well :)

[SpadarShut]

Yes, I'd be happy to contribute that for both buttons.