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)
Do note that if you :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)])
Something like that.

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!

1👍
p-himik 2021-06-27T08:03:05.128400Z

(case icon
  :add-box mui-icons/AddBox
  :clear mui-icons/Clear)
Do note that if you :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)])
Something like that.

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!

1👍