As we mentioned earlier, we can't simply mix React and standard JS libraries and expect the DOM to stay relatively consistent, however there are some situations where mixing the two is a requirement. We'll discuss how to do that now.
Let's say we'd like to insert a map into our application using Leaflet.js (
http://leafletjs.com/). Leaflet is a popular open source JS library for displaying OpenStreetMap
data.
Leaflet's API expects to be given a JS element to render into, which is a relatively common pattern in JS libraries:
(defn leaflet-map [app owner] (reify om/IInitState (init-state [_] {:the-map nil}) om/IDidMount (did-mount [_] (let [the-map (js/L.map "map")] (om/set-state! owner :the-map the-map))) om/IRender (render [this] (dom/div {:id "map"} nil)) ```
Here, in render, we create an empty div with the ID map
. During IDidMount
, after the div is rendered into...