query
query copied to clipboard
Move dev tools option
Sometimes the ergonomics of a button- stuck tool is hard to use. Could there be a button, like in native dev tools to pin the query tool to the sides, or top/ bottom
Can you be a bit more specific? What is a button-stuck tool please?
i think there are already options to position the devtools differently if thatβs what you mean..
No problem, I probably shouldn't write features requests while walking the dog.
Currently we can set the position of the flower tool by passing the position parameter:
<ReactQueryDevtools position={"top-right"} />
That puts the flower trigger in the top right corner. However, the drawer always opens at the bottom.
A user could pass styles and classes in through panelProps. And position the react-query devtools where ever they please.
What I'm thinking is a toggler within the devtools that allows the user to switch the drawer position on the fly. The example I'm thinking of is the layout switcher in Chrome:

This would allow a user to reposition the devtool drawer on the fly as they might switch page layouts, or other window sizes.
β€οΈ the idea, would you like to add it?
Yes, I'll work on it. βββββββββ Clayton Salem 413-768-8522 βββββββββ
On Sun, Nov 21, 2021 at 1:22 AM Dominik Dorfmeister < @.***> wrote:
β€οΈ the idea, would you like to add it?
β You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/tannerlinsley/react-query/issues/2994#issuecomment-974762811, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABMAD6A5FUG6FUYCC7QSEFLUNCF3RANCNFSM5IN4GYFQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.
@TkDodo @claytron5000 I could work on this if there is no one currently working on it
@salamaashoush go ahead, I've assigned you to the issue.
Hi, I created https://github.com/nirtamir2/react-query-devtools-extension to solve this problem. It works well in development but I have a little problem with its event when building it for production. You can use it and integrate it back to react query.
https://twitter.com/NirTamir/status/1508205226884542475
@nirtamir2 this is a pretty cool browser extension, but I am just adding the ability to reposition the current devtools so you don't need to install a browser extension
@TkDodo if you have time could you please have a look at this PR https://github.com/TanStack/query/pull/3678