Clojurians Log v2

Hey all, does anyone have experience with https://tailwindui.com/components / https://headlessui.dev/react and reagent? I’m brushing up on my interop with react components via the https://cljdoc.org/d/reagent/reagent/1.1.0/doc/tutorials/interop-with-react and I’ve gotten as far as having the CSS applied and the javascript working for modals and popovers. The part I’m getting stuck on is the transitions. For example, modals will just appear and disappear instead of fading in and out. This is some example code for a modal I’ve taken from the Tailwind UI https://tailwindui.com/components/application-ui/overlays/modals:

(ns app.views
  (:require [reagent.core :as reagent]
            [re-frame.core :refer [dispatch]]
            ["react" :as r]
            [goog.string :as gstr]
            ["@headlessui/react" :as rui]))

(defn modal-login
  [open?]
  [:> rui/Transition.Root {:show open? :as r/Fragment}
   [:> rui/Dialog {:as "div"
                   :class "fixed z-10 inset-0 overflow-y-auto"
                   :on-close #(dispatch [:modal :login false])}
    [:div {:class "min-h-screen px-4 text-center"}
     [:> rui/Transition.Child {:as r/Fragment
                               :enter "ease-out duration-300"
                               :enter-from "opacity-0"
                               :enter-to "opacity-100"
                               :leave "ease-in duration-200"
                               :leave-from "opacity-100"
                               :leave-to "opacity-0"}
      [:> rui/Dialog.Overlay {:class "fixed inset-0"}]]
     [:span {:class "inline-block h-screen align-middle" :aria-hidden "true"}
      (gstr/unescapeEntities "​")]
     [:> rui/Transition.Child {:as r/Fragment
                               :enter "ease-out duration-300"
                               :enter-from "opacity-0 scale-95"
                               :enter-to "opacity-100 scale-100"
                               :leave "ease-in duration-200"
                               :leave-from "opacity-100 scale-100"
                               :leave-to "opacity-0 scale-95"}
      [:div {:class "inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl"}
       [:> rui/Dialog.Title {:as "h3" :class "text-lg font-medium leading-6 text-gray-900"}
        "Log in to your account"]
       [:div {:class "mt-2"}
        [form-login]]]]]]])

what exactly does the caret indicate for things such as ^:export and ^{:key i}?

Assigning metatada to the next form. The former is sugar for ^{:export true}.

Not Reagent specific at all - it's just how Clojure reader works.

what does "assigning metadata to the next form" mean exactly? what would be the google-able term for this

https://clojure.org/reference/metadata

I thought ^... was a shorthand for {:tag ...}

so thats new to me

^str => ^{:tag str} ^"hello" => ^{:tag "hello"} ^:key => {:key true}

if(meta instanceof Symbol || meta instanceof String)
   meta = RT.map(RT.TAG_KEY, meta);
else if (meta instanceof Keyword)
   meta = RT.map(meta, RT.T);
else if(!(meta instanceof IPersistentMap))
   throw new IllegalArgumentException("Metadata must be Symbol,Keyword,String or Map");