Custom Trigger Component for devtools #228
Conversation
- changes in config to accept an optional custom trigger component - replaces default trigger and allows for rendering a custom trigger
🦋 Changeset detectedLatest commit: 1cc9a12 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Not blocking this pr but this partially answers to the problem of custom trigger, we cannot control where it will end up, I would have prefer something like a hook or an event emitter to open/close the devtools pannel so I can put it anywhere I want (in my case I want it not floating within a sidebar menu) Both are not incompatible |
| <Show | ||
| when={settings().triggerComponent} | ||
| fallback={ | ||
| <button | ||
| type="button" | ||
| aria-label="Open TanStack Devtools" | ||
| class={buttonStyle()} | ||
| onClick={() => setIsOpen(!isOpen())} | ||
| > | ||
| <img src={image || TanStackLogo} alt="TanStack Devtools" /> | ||
| </button> | ||
| } | ||
| > | ||
| <img src={image || TanStackLogo} alt="TanStack Devtools" /> | ||
| </button> | ||
| <div ref={setContainerRef} /> | ||
| </Show> |
There was a problem hiding this comment.
I would do this a bit differently, I would still use the button, and have this div inside of it conditionally rendered with a show, that way you don't have to implement the positions etc yourself, you would only provide the theme to the button and that's it, the rest is handled by the devtools
|
@maastrich That would be a whole different feature IMO, so you want to be able to open/close devtools somewhere in your code without using the trigger from the devtools? |
|
View your CI Pipeline Execution ↗ for commit 1cc9a12
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/devtools
@tanstack/devtools-client
@tanstack/devtools-ui
@tanstack/devtools-utils
@tanstack/devtools-vite
@tanstack/devtools-event-bus
@tanstack/devtools-event-client
@tanstack/react-devtools
@tanstack/solid-devtools
commit: |
3 participants
🎯 Changes
Custom Trigger Component Support
triggerComponentproperty to the devtools configuration, allowing users to specify a custom function or React element to render the devtools trigger. This replaces the default trigger button if provided. (packages/devtools/src/context/devtools-store.ts,packages/react-devtools/src/devtools.tsx)Triggerto check for a custom trigger component and render it via a container reference if present. (packages/devtools/src/components/trigger.tsx)✅ Checklist
pnpm test:pr.🚀 Release Impact