A minimalistic ClojureScript interface to React.js
Jason 2020-11-24T23:01:10.249200Z

Hello. I'm using Material UI widgets in my app and I notice that in the < sample code (click '<>' to open code window)> , some widget properties are camelCase as expected, so I'm positive reagent will translate them to and from kebab-case for cljs use. However, some are kebab-case in the JS code. From the sample code:

        aria-owns={open ? 'mouse-over-popover' : undefined}
Is reagent clever enough to notice this and not rewrite my cljs kebab-case keywords? If not, is there a workaround?

p-himik 2020-11-24T23:14:46.249400Z

It's not that clever because it cannot possibly look into the JS code. But you can do that by using string keys instead of keyword keys.

p-himik 2020-11-24T23:15:21.249600Z

This is how Reagent does it:

(def dont-camel-case #{"aria" "data"})

(defn capitalize [s]
  (if (&lt; (count s) 2)
    (string/upper-case s)
    (str (string/upper-case (subs s 0 1)) (subs s 1))))

(defn dash-to-prop-name [dashed]
  (if (string? dashed)
    (let [name-str (name dashed)
          [start &amp; parts] (string/split name-str #"-")]
      (if (dont-camel-case start)
        (apply str start (map capitalize parts))))))

p-himik 2020-11-24T23:15:56.249800Z

Oh, hold on - if your question touches only aria-* and data-* properties, then you're golden since Reagent treats them and only them specially.

Jason 2020-11-24T23:41:04.250Z

My concerns are indeed limited to aria-*so that is great news. Thanks very much for responding.