Helix can be paired with other React wrappers, which can be useful if you'd like easy access to hooks or less indirection in the creation of your React components.
Calling Helix components from Reagent components requires nothing special; just use the regular Helix component construction form:
(require '[helix.core :as h :refer [defnc $ <>]])
(defn reagent-component [a b c]
[:div
($ helix-component {:foo "bar"})])
This works because Reagent accepts React components in the hiccup returned by components.
Calling Reagent components from Helix components requires the use of reagent.core/as-element
:
(require '[reagent.core :as reagent]
'[helix.dom :as d])
(defnc helix-component [{:keys [a b c]}]
(d/div
(reagent/as-element [reagent-component a b c])))
Note that Reagent components can take any number of arguments, whereas Helix components behave like vanilla React components accepting either a single props
object or a props
object and a ref
.
You might want to be able to use Reagent's reactive atoms or Re-frame subscriptions in your Helix components. This is possible with a couple custom hooks:
(require '["react" :as react]
'[re-frame.core :as rf])
(defn use-deref [a]
;; TODO
)
(defn use-sub
"Subscribe to a re-frame sub"
[query]
(use-deref (rf/subscribe query)))
Finally, if you want to rewrite a (form-1) Reagent component as a Helix component, it's generally pretty simple:
props
map.props
map.reagent.core/as-element
.These two examples are equivalent:
;; Reagent:
(defn foo [a b c]
[:div {:class "abc"}
[:div [subcomponent a b c]]])
(defn bar [z y x]
[:div [foo @(rf/subscribe [:sub]) y x]])
;; Helix:
(defnc foo [{:keys [a b c]}]
(d/div
{:class "abc"}
(d/div
(reagent/as-element [subcomponent a b c]))))
(defnc bar [{:keys [z y x]}]
(d/div ($ foo {:a (use-sub [:sub]) :b y :c x})))
Can you improve this documentation?Edit on GitHub
cljdoc is a website building & hosting documentation for Clojure/Script libraries
× close