In ClojureScript, how do I properly use cljsjs/react-mdl?

Question

I've really been struggling with cljsjs libraries, and I've probably spent 2 full days worth of my life playing with the interop of react-bootstrap, and various material libraries in clojurescript.

Basically, I just want to be able to get UI components into my ClojureScript projects. If you can recommend something better than cljsjs/react-mdl, I'd love it. If you know how to help with my current bugs, I'd love that too!

I currently have:

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

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

And I get the error:

ReactMDL is not defined

in the javascript console.

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

I'm using this wrapper: https://github.com/cljsjs/packages/tree/master/react-mdl

For this library: https://github.com/tleunen/react-mdl

And these interop instructions on cljsjs: https://github.com/cljsjs/packages/wiki/Using-Packages

I'm also using clojure's reagent, and reframe, if that matters. Honestly, I just want to get some project out the door built with Clojure and relevant libs, if you can recommend I use a different stack, please do!

Am I just overlooking something simple?

I had problems with it too, so after a day of my life I went back to Semantic UI, which seems to be at a higher level and simply works for building SPAs. I note that neither MDL nor Bootstrap were recommended when I asked in the Slack group. These were: Foundation, Basscss, Semantic UI. — Chris Murphy, Feb 05 '16 at 20:45
@ChrisMurphy Yes! This is the exact kind of advice I need :) Is the slack group where the community pre-dominantly hangs out? What stack of libs have you been using with CLJ(S)? (I'm having trouble finding projects that have integraged cljs to those 3 frameworks/libs you mentioned...) — Josh.F, Feb 05 '16 at 21:02
re-com is a Reagent based UI library you might like, especially as you're already using re-com. — Daniel Compton, Feb 05 '16 at 21:10
@DanielCompton I looked at it, and from reading through the readme, it looks like they strongly warn against using it, haha. Do you know much about how stable + how well supported it is? — Josh.F, Feb 05 '16 at 21:47
Yes - much more so than SO. If you ask questions on particular libraries the authors will be there to support you. See you in the Slack group. Not enough space here... — Chris Murphy, Feb 05 '16 at 21:52
I'm working with the company who wrote it, and it's in production for us. I'd recommend evaluating it and seeing if it fits your needs. — Daniel Compton, Feb 06 '16 at 17:54
@DanielCompton Any chance you could send my a github gist that shows how to use it in a minimal example, like just a button, or something? I'd love to use it if I could figure it out! — Josh.F, Feb 06 '16 at 18:24
@DanielCompton Ah, thanks. I feel dumb now because I thought you were using react-mdl and *that's* what I wanted a gist for, but instead you pointed me to re-com's documentation which, in retrospect, is clearly what you were talking about, and I could have searched for on my own. Thanks for the link! — Josh.F, Feb 08 '16 at 17:10
Just a follow up on what I did, I just linked to a bootstrap CDN for now in my `index.html` and all my code has access to bootstrap components now, it gets me by :) — Josh.F, Feb 24 '16 at 16:57

score 2 · Accepted Answer · answered Feb 05 '16 at 20:58

I'll just answer getting a button going.

I didn't use any cljs libraries. I just used the css and the js as supplied. They need to be in your markup, and as well a link to the Material Design icons library.

This is the example in Reagent:

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

And this in 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}))

I'm quite new to all this, but my preference is to just use css, keep the Javascript to a minimum, and then build components manually in whatever React wrapper the project is using.

nha · Answer 2 · 2016-02-06T11:31:58.340

It should be used like that :

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

You still need to require it in order to import the js and css files (that is all it does really). It threw me off at first too (when I was packaging it for cljsjs).

This is because react-mdl exposes objects through the global scope, for instance see https://github.com/tleunen/react-mdl/blob/master/extra/material.js#L701

Note : you could just use the css for some objects, like @Chris Murphy answer, but the point of react-mdl (instead of mdl) it to manage the lifecycle when needed as a react component. Otherwise you would just need mdl (which is completely fine). It may not matter for a simple button though.

score 1 · Answer 3 · answered Dec 30 '16 at 11:19

This is how I made react-mdl work with Reagent.

Client app code

Require packages in project.clj:

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

Require in namespace:

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

Create helpers for components you'll use:

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

Now they can be used in Reagent views like this:

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

Server app code

react-mdl CSS file and Material UI icons should be included into HTML.

The CSS file is embedded inside cljsjs/react-mdl package. 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 of extracting non JS assets from cljsjs packages are described in the project's wiki.

In ClojureScript, how do I properly use cljsjs/react-mdl?

3 Answers3

Client app code

Server app code