fulcro

2024-12-14T18:58:07.619549Z

Hi I'm completely new to Fulcro, and also to React for that matter (mostly Vue, recently just HTMX). I've seen Semantic UI being used most of the time, but I was wondering if any UI library could be used with Fulcro, or if there are details to be aware of when choosing a library over another. I would like to use the UI library utilities together with Fulcro, without 'things that doesn't or might not work 100℅" Thanks !

2024-12-15T16:02:54.688059Z

Thanks @yaw556 and @timeyyy_da_man for the answers, I just started to tinker with it, first with Mantine but moved to Antd

2024-12-15T16:06:35.571769Z

I have another newbie question... I'm doing the Fulcro exercises from fulcro minimalist tutorial, and in the exercise 3 I wanted, just to know how, to also bring heading to the ValuePropositionPoint component, I did something like this but it seems wrong as I'm not using the query

(defsc ValuePropositionPoint
         [_ {:proposition/keys [label] :as props}]
         {:query [:proposition/label]}
         (li (str label " - " (:heading props))))

  (def ui-value-proposition-point (comp/factory ValuePropositionPoint {:keyfn :proposition/label}))

  (defsc Root3
         [_ {:page/keys [heading value-proposition-points]}]
         {:query [:page/heading
                  {:page/value-proposition-points (comp/get-query ValuePropositionPoint)}]}
         (div
          (h1 :#title {:style {:textAlign "center"}} "hdr:" heading)
          (ul (map ui-value-proposition-point
                   (map #(assoc % :heading heading) value-proposition-points)))))

  (config-and-render! Root3
                      {:initial-db
                       {:page/heading                  "<3> Fulcro is:"
                        :page/value-proposition-points [{:proposition/label "Malleable"}
                                                        {:proposition/label "Full-stack"}
                                                        {:proposition/label "Well-designed"}]}})
How should this be done?

Yaw Odame 2024-12-15T16:51:15.474329Z

Using an assoc is not wrong. However, you could leverage https://book.fulcrologic.com/#_link_queries here.

(defsc ValuePropositionPoint
         [_ {:proposition/keys [label]
             :page/keys [heading] 
             :as props}]
         {:query [:proposition/label
                  [:page/heading '_]]}
         (li (str label " - " (:heading props))))

Yaw Odame 2024-12-14T20:12:00.072369Z

@victorvollbrecht I am currently working on a demo example codebase for using modern utility component libraries shadcn-ui. I hope to post a link here soon. I also want to do one for react-native-reusable or gluestack-ui for react native apps.

Yaw Odame 2024-12-14T20:13:14.130079Z

To answer your question, yes any JS/react library will work. It's a simple interop.

timeyyy 2024-12-15T04:10:18.565699Z

currently running mantine in the web, and i went with react native paper for native. Just normal dependency issues etc but nothing fulcro specific :)