Skip to content

Instantly share code, notes, and snippets.

@attentive
Last active September 16, 2017 09:25
Show Gist options
  • Save attentive/c194b1ed76640fae77db5a0695770a07 to your computer and use it in GitHub Desktop.
Save attentive/c194b1ed76640fae77db5a0695770a07 to your computer and use it in GitHub Desktop.
Adapting React components in Rum
(ns project.leaflet
(:require-macros [project.macros :as m])
(:require [rum.core :as rum]
cljsjs.react-leaflet)) ;; js/ReactLeaflet
(m/adapt-react leaflet-map js/ReactLeaflet.Map)
(m/adapt-react tile-layer js/ReactLeaflet.TileLayer)
(m/adapt-react marker js/ReactLeaflet.Marker)
(m/adapt-react popup js/ReactLeaflet.Popup)
(defn osm-tiles []
(tile-layer {:url "http://{s}.tile.osm.org/{z}/{x}/{y}.png"
:attribution "&copy; <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors"}))
(rum/defc simple-map [{:keys [pos zoom] :as state} & children]
(apply (partial leaflet-map {:center pos :zoom zoom} (osm-tiles)) children))
(rum/defc twin-map [{:keys [pos zoom] :as state}]
[:div.side-by-side nil (simple-map state) (simple-map state)])
(ns project.macros
(:require [cljs.core :as cljs]))
(defmacro adapt-react [rum-name react-component]
`(rum/defc ~rum-name [props# & children#]
(.createElement js/React ~react-component (cljs/clj->js props#) (cljs/array children#))))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment