react-select using reagent and klipse

react_select_klipse.cljs

(ns zap.core
  "Demonstrate react-select in KLIPSE"
  (:require [reagent.core :as r]
            [cljsjs.classnames]
            [cljsjs.react-input-autosize]
            [cljsjs.react-select]))

(defonce value (r/atom nil))

(defn select-ui []
  [:> js/window.Select {:value @value
                        :options #js [#js {:value "a" :label "alpha"}
                                      #js {:value "b" :label "beta"}
                                      #js {:value "c" :label "gamma"}]
                        :onChange #(reset! value (aget % "value"))}])

(defn root-ui []
  [:div {:style {:width 400}}
   [:h3 "Select test"]
   [select-ui]])

;; the purpose of the rest is just to load the css
;; in KLIPSE

(defn load-many [cb x & rst]
  (let [cntn (fn [] (if (seq rst)
                      (apply load-many cb rst)
                      (cb)))]
    (if (.endsWith x ".css")
      (let [head (aget (js/document.getElementsByTagName "head") 0)
            node (doto (js/document.createElement "link")
                   (aset "type" "text/css")
                   (aset "rel" "stylesheet")
                   (aset "href" x)
                   (aset "onload" (fn []
                                    (js/console.log "loaded css:" x)
                                    (cntn))))]
        (.append head node))
      (goog.net.XhrIo.send x
                           (fn [e]
                             (js/eval (-> e .-target .getResponseText))
                             (js/console.log "loaded js:" x)
                             (cntn))))))

(defn unpkg-many [cb & xs]
  (apply load-many cb (map #(str "https://unpkg.com/" %) xs)))

(defonce initialized? (atom nil))

(defn init [cb]
  (let [cb (or cb identity)]
    (if @initialized?
      (cb)
      (unpkg-many (fn []
                    (reset! initialized? true
                            (cb)))
                  "react-select/dist/react-select.css"))))

(init #(r/render [root-ui] js/klipse-container))

Link to Klipse: http://app.klipse.tech/?container=1&cljs_in.gist=pesterhazy/6c517653945f84a39c1ae3cc8b20c552