Option to remove the devtools button

[jamesthomsondev]

I understand that I can visually hide and/or reposition the button that sits in the browser, however this doesn't really work well for our case. We develop a web application for mobile (phone) devices and therefore have many hit areas where the devtool button is placed (e.g. button to close something in the top right corner, button to go back in the top left corner, a navbar with tabs on the bottom).

I'd love an option that completely removed the devtools button (so it doesn't block elements) which then allows me to just use the keyboard shortcut.

[AlemTuzlak]

I'd be down to implement this 👍

[cooltolia]

Currently facing the same use case. For now ended up by rendering devtools conditionally and hiding a button with css, but it feels overcomplicated. Plus it has a subtle bug if a user closes devtools by clicking an arrow button in the top right corner.

If there is a better way of doing that today would appreciate any feedback.

const [showDevtools, setShowDevtools] = useState(
    () => localStorage.getItem('TanstackQueryDevtools.open') === 'true'
  );

const handleToggleDevtools = () => {
  setShowDevtools((prev) => !prev);
};

useEffect(() => {
  localStorage.setItem('TanstackQueryDevtools.open', showDevtools.toString());
}, [showDevtools]);

useEffect(() => {
  const handleKeyDown = (event: KeyboardEvent) => {
    if (event.altKey && event.shiftKey && event.code === 'KeyD') {
      handleToggleDevtools();
    }
  };
  window.addEventListener('keydown', handleKeyDown);

  window.toggleTanstackQueryDevtools = handleToggleDevtools;

  return () => {
    window.removeEventListener('keydown', handleKeyDown);
    delete window.toggleTanstackQueryDevtools;
  };
}, []);

[TakhyunKim]

Hello @cooltolia, I'm not sure if this will help, but I'm sharing the relevant settings I found.
It seems you can implement this by utilizing the openHotKey prop in the TanStackDevtools config.

• docs: https://tanstack.com/devtools/latest/docs/configuration#devtools-component-configuration
  (The document contains the openHotkey option)

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { TanStackDevtools } from "@tanstack/react-devtools";

import App from "./App.tsx";
import CustomDevtoolPanel from "./CustomDevtoolsPanel.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
    <TanStackDevtools
      plugins={[
        {
          name: "Custom Devtools",
          render: <CustomDevtoolPanel />,
        },
      ]}
      config={{
        openHotkey: ["Control", "Z"],
      }}
    />
  </StrictMode>
);

[cooltolia]

Thank you for the response @TakhyunKim. I actually realized I came to the wrong repo :) I didn't know the separate package exists for tools.

yet I tried it and faced even more issues. I guess that's fine since it's only in alpha. But the main blocker is still visibility of the trigger button. yes, there is hideUntilHover option but when it overlaps with actual UI buttons it's no help

[TakhyunKim]

I'm still studying this library myself, so it's hard for me to give a clear answer. 🥺
The only method that comes to mind right now is hiding the DevTools trigger button using CSS, like you did before.

[AlemTuzlak]

This has been implemented with the latest release!