Last active
September 16, 2017 09:25
-
-
Save attentive/c194b1ed76640fae77db5a0695770a07 to your computer and use it in GitHub Desktop.
Adapting React components in Rum
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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 "© <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)]) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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