I am trying to find out how in Reagent with Hiccup make an element with takes all available space. So an resize parent I will get :component-did-mount call back.
(defn chart [id col-width row-height]
(let [dimensions (atom {})]
(reagent/create-class
{:component-did-mount
(fn [e]
(let [thisComponent (aget (js/document.querySelector ".app") "parentNode")
width (aget thisComponent "offsetWidth")
height (aget thisComponent "offsetHeight")]
(swap! dimensions {:width width :height height})
(println "----did mountwdth" width "--" height col-width row-height)
(.log js/console thisComponent)))
:reagent-render
(fn [id col-width row-height]
[:div
[:div {:style {:background "gray"}} "--drag handle--"]
[:div.non-dragable
[simple-bar id]
[tchart id col-width (int (- row-height controls-height))]]])})))
I want the chart element to take all the space available.
React lifecycle callbacks like ComponentDidMount
does not react to component size changes.
If you want to fire a callback whenever the component size changes - you'll need to use some third-party React libraries like react-measure or react-sizeme
The other strategy is to add an event listener on window resize and get your component's parent size from there.