Using third-party JS

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] ...

Get Learning ClojureScript now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.