In ClojureScript, how to use cljsjs / react-mdl correctly?

Question

I really struggled with libraries cljsjs, and I probably spent 2 days a lifetime playing with interop react-bootstrapand various materiallibraries in clojurescript.

Basically, I just want to get the user interface components in my ClojureScript projects. If you can recommend something better than cljsjs/react-mdlI would love it. If you know how to help with my current mistakes, I will like it too!

I currently have:

(ns project.views
  (:require [cljsjs.react-mdl]))

(def Button (aget js/ReactMDL "Button"))

And I get the error message:

ReactMDL is not defined

in javascript console.

I just want to get one button react-mdldisplayed on the screen.

I use this shell: https://github.com/cljsjs/packages/tree/master/react-mdl

: https://github.com/tleunen/react-mdl

interop cljsjs: https://github.com/cljsjs/packages/wiki/Using-Packages

clojure reagent reframe, . , - , clojure , , , !

- ?

Answer 1

, .

cljs. css js . , Material Design.

:

[:input {:type "submit"
:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
:value "ok"}]

Om Next:

(defui MDSubmitButton
  Object
  (render [this]
    (dom/button (clj->js {:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"})
                (dom/i (clj->js {:className "material-icons"}) "add"))))
(def md-submit-button (om/factory MDSubmitButton {:keyfn :id}))

, css, Javascript React, .

Answer 2

:

(js/MaterialCheckbox element)
(js/MaterialDataTable ...)
;; and so on

require , js css ( , ). ( cljsjs).

, react-mdl , , https://github.com/tleunen/react-mdl/blob/master/extra/material.js#L701

: css , , @Chris Murphy, react-mdl ( mdl) - , , . mdl ( ). .

Answer 3

react-mdl Reagent.

project.clj:

[reagent "0.6.0" :exclusions [cljsjs/react]]
[cljsjs/react-with-addons "15.3.1-0"]
[cljsjs/react-mdl "1.5.4-0"]

:

(ns ,,,
 (:require  ,,,
            [cljsjs.react-mdl]))

, :

(def Button (.-Button js/ReactMDL))
(def Slider (.-Slider js/ReactMDL))
,,,

Reagent :

[:> Button "Hello!"]
[:> Slider {:min 0 :max 10}]

react-mdl CSS HTML.

The CSS file is embedded inside the package cljsjs/react-mdl. To extract it, I used ring-cljsjs middleware:

; Add dependencies to project.clj
[ring-cljsjs "0.1.0"]
[cljsjs/react-mdl "1.5.4-0"]

; Apply middleware to the Ring handler
(ns app.handler
  (:require ,,,
            [ring.middleware.cljsjs :refer [wrap-cljsjs]]))
,,, 
(-> ,,,
   wrap-cljsjs)

; Add link to CSS into Hiccup template for the served HTML file
(ns ,,,
  (:require ,,,
            [hiccup.page :as h]))
,,,
[:head
  [:meta {:charset "UTF-8"}]
  [:meta {:name "viewport" :content "width=device-width, initial-scale=1"}]

  (h/include-css "/cljsjs/react-mdl/material.min.css")
  ,,,

Other ways to extract assets without JS from packages are cljsjsdescribed in the project wiki .