Clojurians Log v2

Hi, I’m trying to get headlessui working in my app using Helix.

(ns website.core
  (:require [helix.core :refer [defnc $ <>]]
            [helix.dom :as  d]
            ["react-dom" :as rdom]
            ["@headlessui/react" :refer [Switch]]))

(def switch-label  #(. Switch -Label))
(def switch-group #(. Switch -Group))

(defnc my-component []

  (switch-group
     (switch-label "Dooo")
     (Switch {:checked true
              :class "relative inline-flex items-center h-6 rounded-full w-11 bg-gray-200"})))

(defn ^:export start
  []
  (rdom/render ($ my-component) (js/document.getElementById "app")))

I know my Switch is missing a bunch of props but its getting switch-group and switch-label to play nicely.

So I guess my question comes down to this, how does one go about using a lib such as HeadlessUI in Helix?

Using

(def switch-label  (. Switch -Label))
(def switch-group (. Switch -Group))

(defnc my-component []

  (switch-group
     (switch-label "Foo")
     (Switch {:checked true
              :class "relative inline-flex items-center h-6 rounded-full w-11 bg-gray-200"})))

Results in this error

I’m idiot… ignore me. Just in case any one ever stumbles on this

(ns website.core
  (:require [helix.core :refer [defnc $ <>]]
            [helix.dom :as  d]
            ["react-dom" :as rdom]
            ["@headlessui/react" :as ui]))

(def switch-label ui/Switch.Label)
(def switch-group ui/Switch.Group)

(defnc my-component []

  
  ($ switch-group
    ($ switch-label "Hello?")
   ($ ui/Switch {:checked true
                :className "relative inline-flex items-center h-6 rounded-full w-11 bg-gray-200"})))

That works

nice! glad you figured it out

I recently used headlessui for their popover menu 😄 I felt ready to answer when I started reading and then you came to the conclusion already!