Fork me on GitHub
Ovidiu Stoica08:02:20

How would you define a reagent component so it can be used as the basic hiccup dom components. Example for the component comp:

[comp "Hello"]

[comp {:my-prop val} "hello"]


[comp {:my-other-prop val}


(defn comp [props]
  (comment "Return hiccup and make use of props here..."))


If you want a parent that can host children, then you can use [props & children] for your argument list e.g.

(defn comp 
  "Reproduces your last example"
  [{:keys [my-other-prop]} & children]
    [:p "my other prop: " my-other-prop]
    (into [:<>] children)])
disclaimer: didn’t test; react may complain about lack of keys in the child components


If you’re asking whether you can define a component that can optionally take in props and optionally take in children, then you’ll want to make a multi-arity function

Ovidiu Stoica09:02:45

But wouldn't this approach fail if you pass children and no props? It seems that reagent would take the first param which is children to be the props map


yes, so in the case of 1-arity you’d want to distinguish maps and other objects to decide how to treat the argument

Ovidiu Stoica10:02:58

I see. Thank you!

Ovidiu Stoica12:02:56

(defn container
  [& _]
   (let [this (r/current-component)
         props (r/props this)
         children (r/children this)]
     ;; render login
     [:div {:class-name "container mx-auto px-4 bg-slate-100 dark:bg-slate-900"}]))
^ is this considered to be bad practice for the given context?