query icon indicating copy to clipboard operation
query copied to clipboard

Move dev tools option

Open claytron5000 opened this issue 3 years ago β€’ 9 comments

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

claytron5000 avatar Nov 20 '21 11:11 claytron5000

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..

TkDodo avatar Nov 20 '21 17:11 TkDodo

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: image

This would allow a user to reposition the devtool drawer on the fly as they might switch page layouts, or other window sizes.

claytron5000 avatar Nov 20 '21 23:11 claytron5000

❀️ the idea, would you like to add it?

TkDodo avatar Nov 21 '21 06:11 TkDodo

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.

claytron5000 avatar Nov 21 '21 14:11 claytron5000

@TkDodo @claytron5000 I could work on this if there is no one currently working on it

salamaashoush avatar Jun 05 '22 14:06 salamaashoush

@salamaashoush go ahead, I've assigned you to the issue.

TkDodo avatar Jun 05 '22 14:06 TkDodo

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 avatar Jun 05 '22 15:06 nirtamir2

@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

salamaashoush avatar Jun 05 '22 16:06 salamaashoush

@TkDodo if you have time could you please have a look at this PR https://github.com/TanStack/query/pull/3678

salamaashoush avatar Jun 09 '22 15:06 salamaashoush