way to add custom attributes to react component?

[kirillsalykin]

Currently react has attributes whitelist, to be able to use custom attributes you can apply this workaround
(from http://stackoverflow.com/questions/31273093/how-to-add-custom-html-attributes-in-jsx):

Custom attributes are currently not supported. See this open issue for more info: facebook/react#140
As a workaround, you can do something like this in componentDidMount:
componentDidMount: function() {
this.refs.test.getDOMNode().setAttribute('custom-attribute', 'some value');
}
See https://jsfiddle.net/peterjmag/kysymow0/ for a working example. (Inspired by syranide's suggestion in this comment.)

How i can use this workaround with rum? i need to add webkitdirectory to file upload.

Thanks!

[tonsky]

(rum/defc my-comp < { :did-mount (fn [state]
                                   (let [comp (:rum/react-component state)
                                         node (js/ReactDOM.findDOMNode comp)]
                                     (.setAttribute node "custom-attribute" "value"))
                                   state) }
  [:div])

If you’re using [rum 0.5.0], replace js/ReactDOM with js/React.

For your convenience, you can abstract that into mixin:

(defn with-attributes [m]
  { :did-mount
    (fn [state]
      (let [comp (:rum/react-component state)
            node (js/ReactDOM.findDOMNode comp)]
        (doseq [[k v] m]
          (.setAttribute node (name k) v)))
      state) })

(rum/defc my-comp < (with-attributes {:custom "value", :another "value2"})
  [:div])

[kirillsalykin]

wow, this is really awesome!

[kirillsalykin]

thanks!