2023-02-04 reagent | Clojure Slack Archive

reagent

Ovi Stoica 2023-02-04T08:11:20.134559Z

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]

[comp {:my-other-prop val}
  [comp2]
  [comp3]]

hifumi123 2023-02-04T08:20:49.859869Z

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

hifumi123 2023-02-04T08:23:35.346909Z

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]
  [:div
    [:p "my other prop: " my-other-prop]
    (into [:<>] children)])

disclaimer: didn’t test; react may complain about lack of keys in the child components

hifumi123 2023-02-04T08:29:52.232269Z

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

Ovi Stoica 2023-02-04T09:50:45.092619Z

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

hifumi123 2023-02-04T09:56:33.779599Z

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

Ovi Stoica 2023-02-04T10:42:58.963629Z

I see. Thank you!

Ovi Stoica 2023-02-04T12:03:56.278289Z

(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?

Clojurians Log v2

reagent