Javascript Interop pattern: reagent + fun(ElementById)

A common Javascript pattern in libraries is code as follows:

    <script id="code">
    // ...
const element = document.getElementById('chart');
// ...
const timeline = new TimelineChart(element, data, { // ... 

The key part being to grab an element and feed that element to a function. In Reagent (React), however, this pattern is more difficult for me to adapt because of the different sequencing and the virtual dom.

For this kind of interop is creating a form-3 component the best way of implementing this, or is there a simpler way of utilizing this pattern of library, or is the form-3 the way to go?

Something I do sometimes is to use React‘s ref prop with a function value on standard HTML elements:

(defn timeline-chart []
  [:div {:ref #(...)}

This will be called with the current DOM node (whenever it changes,
so watch out for nil and updates).


Wow! I had no idea about :ref. What documentation should I have been reading to notice that?


First, take a look through as it’s really a React feature, not reagent.

Then for how to use it in reagent, I found and to be enough to understand how to make it work.


Beautiful! Especially the Mysteries of Reagent series, which is new to me

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.