potent heart
Can't seem to find any good examples of using Tailwind's HeadlessUI library in Remix.
Follow up question: Codesandbox has a neat feature for searching sandboxes for a combination of dependencies. Is there a way to do something similar with github repos?
Right now I'm looking for examples of useTransition with headlessui's Transition component; and modal outlet with Modal Dialog component.
copper stirrup
What are you using the useTransition hook for with Transition and Dialog?
potent heart
I have a text editor that I'm adding some extra features to https://nalu.wiki/p/new?template=30&nalu=toweroffantasy
An button that is a multi part form that generates a string to insert in the textbox.
Since the logic is pretty self-contained, I thought it might make sense to make that logic a child outlet, something like https://stackblitz.com/edit/github-g6rtk8-yh5po1?file=app%2Froutes%2Fhello%2Fcreate.tsx
copper stirrup
Ah, yea. I do see you in this post: https://discord.com/channels/770287896669978684/1013478809145708667.
The idea is to keep the Modal and Transition in the parent.
potent heart
The part I'm stuck on is headlessui mostly assumes useState, but I wonder if there's a more sensible prop we can read off useTransition.
copper stirrup
Wait, maybe you're talking about something else.
Are you trying to open the modal when navigating?
potent heart
Ah yes, lost my bookmark on that thread.
Yeah, what would be a good way to open the modal on navigation?
copper stirrup
const Parent = () => {
const navigate = useNavigate()
const outlet = useOutlet()
return (
<Dialog open={!!outlet} onClose={() => navigate('.')>
<Outlet />
</Dialog>
)
}
Ah, that makes sense!
copper stirrup
Parent controls where the child is rendered. In this case, parent chooses to render that child route in a modal.
potent heart
What about the open prop the Transition component? show={!!outlet} makes sense?
potent heart
So altogether, approximately...
import { Dialog, Transition } from "@headlessui/react";
import { useNavigate, useOutlet, Outlet } from "@remix-run/react";
const Parent = () => {
const navigate = useNavigate()
const outlet = useOutlet()
return (
<Transition show={!!outlet}>
<Dialog onClose={() => navigate('.')}>
<Outlet />
</Dialog>
</Transition>
)
}
Yeah, that looks great. Thanks!
copper stirrup
Ye.
potent heart
As much as the Remix team have been pushing Tailwind, I'm surprised there hasn't been any examples in the repo for using headless ui too.
copper stirrup
Probably because the Remix team has their own component library that they'll get back to some day. Reach UI is from Florence, and I heard he has ideas to make it work well with Remix.
potent heart
No prob, 2ez was able to get me through the hard part of marrying remix and headlessui
Somehow the optimal solution in Remix consistently end up the simplest, most elegant one.
steady token
Usually is one of the nicer DX aspects
copper stirrup
Somehow the optimal solution in Remix consistently end up the simplest, most ele...
Yea, this would've been harder in other frameworks I think.