Hide react query devtools icon

[assassin18121771]

While development, we would not require react query devtools everytime, thus we should have a prop for the devtools icon, so that it is displayed or not, as per the developer needs

[troywoy]

We followed this example to conditionally render the component: https://tanstack.com/query/latest/docs/framework/react/devtools#devtools-in-production

[letttechnology]

would like the same property to hide icon. This worked for me.

Sorry code block not working...

function HiddenDevtools() {
const [showDevtools, setShowDevtools] = useState(false);

// Checks Vite context first, falls back to Webpack/Next.js environment format
const isDevelopment =
(typeof import.meta !== 'undefined' && import.meta.env?.DEV) ||
(typeof process !== 'undefined' && process.env?.NODE_ENV === 'development');

if (!isDevelopment) {
return null;
}

return (
<>
<button
onClick={() => setShowDevtools((prev) => !prev)}
style={{
position: 'fixed',
bottom: 20,
right: 20,
width: '15px',
height: '15px',
zIndex: 999999,
background: 'rgba(0, 0, 0, 0.05)',
border: 'none',
cursor: 'pointer',
}}
/>
{showDevtools && }
</>
);
}

Then just put
<HiddenDevtools />
in function App()