defhooks.cljs

(ns app.main
  (:require ["react-dom" :as rdom]
            [helix.core :as hx :refer [defnc $ <>]]
            [helix.dom :as d]
            [helix.hooks :as hooks]
            [clojure.core.async :as a :refer [go-loop]]))

(defnc greeting
  "A component which greets a user."
  [{:keys [name]}]
  ;; use helix.dom to create DOM elements
  (d/div "Hello, " (d/strong name) "!"))

(hx/defhook use-rand-roll []
  (let [cancel-signal (hooks/use-ref false)]
    (hooks/use-effect
      []
      (go-loop []
        (if-some [msg (when (pos? (rand-int 6))
                        :channel)]
          (do (prn msg)
              (recur))
          (reset! cancel-signal true)))
      #(reset! cancel-signal true))))

(defnc app []
  (let [[state set-state] (hooks/use-state {:name "Helix User"})]
    (use-rand-roll)
    (d/div
      (d/h1 "Welcome!")
      ;; create elements out of components
      ($ greeting {:name (:name state)})
      (d/input {:value (:name state)
                :on-change #(set-state assoc :name (.. % -target -value))}))))

;; start your app with your favorite React renderer
(defn ^:dev/after-load start []
  (rdom/render ($ app) (js/document.getElementById "app")))

(defn ^:export init
  []
  (start))