Clojurians Log v2
Clojure programming
Channels
Apps
reagent
A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
rlhk 2021-06-27T06:40:55.128200Z
Hi All, I'm looking for a way to dynamically work with react class components.
Say in the reagent MUI sample: https://github.com/reagent-project/reagent/blob/master/examples/material-ui/src/example/core.cljs
It's all good if we hard code the icons: [:> mui-icons/AddBox] [:> mui-icons/Clear] if we know the names at coding time.
Is there a way to make it dynamic? Idea like [:> (symbol "mui-icons" "SomeIconNameString")] or [:> "SomeIconNameString"]? Obvious the idea code don't work.
p-himik 2021-06-27T08:03:05.128400Z
(case icon
:add-box mui-icons/AddBox
:clear mui-icons/Clear):require the whole MUI package, it wil all be included in the final build, even if you don't use 90% of it. It's much better to include only things that you actually need. And not via ["@material-ui/core" :refer [...]] but via separate files, like ["@material-ui/icons/CheckCircle" :default CheckCircle].p-himik 2021-06-27T08:04:19.128600Z
There might be a way to also automate such requires with CLJS 1.10.866 that has CLJS-3276 implemented. But I haven't delved into it so can't say for sure.
rlhk 2021-06-27T08:35:31.128900Z
Thanks for the extra info. The case approach still requires coding the symbol. @fortawesome's component accepts a string param like: [:> FontAwesomeIcon {:icon "icon-name"}]. Probably need to generate a mapping fn for icons of MUI & Ant Design which use same approach.
p-himik 2021-06-27T08:46:01.129100Z
If you don't care about the bundle size, you can probably require all the icons and use regular JS interop to get icon objects by name.
p-himik 2021-06-27T08:48:27.129300Z
(ns example.core
(:require ["@material-ui/icons" :as mui-icons]
[goog.object :as gobj]))
(defn icon [name]
[:> (gobj/get mui-icons name)])rlhk 2021-06-27T09:20:05.129500Z
Cool. Exactly what I'm looking for. Don't mind the size for now. Not product stuff. Thanks!