CODEWITHSUNDEEP
clojurematerial-designclojurescript
Hoopes
Hoopes

Reputation: 4175

Actually using a cljsjs package

I'm having trouble understanding how to go from installing to using a cljsjs package. I am using the standard figwheel template, and I've made a little progress learning it, but now I'd like to use some 3rd party JS, and while cljsjs looks like the ticket, I can't find a clear example of how to actually use the packages.

I'm attempting to use the material package, to start with (http://material-ui.com). I'd like to just display a simple button to start.

I've added the [cljsjs/material "1.0.4-0"] to my project.clj, and lein installs it....now what?

Where and when should I (:require [cljsjs.material]) ?

How would I then create a <FlatButton> component, or whatever?

I see a resources/public/js/compiled/out/material.inc.js with what appears to be the full source for material - how do I use it?

Thanks in advance to any kind soul taking pity on a cljs beginner. It is incredibly appreciated. If there is anything out there that answers my question that my googling somehow missed, I apologize in advance.

Upvotes: 3

Views: 1100

Answers (2)

Chris McCormick
Chris McCormick

Reputation: 4456

A primer on actually using cljsjs packages can be found here:

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

To use the material-ui package for example:

  • Put [cljsjs/material-ui "3.9.1-0"] in the :dependencies section of your project.clj file (make sure you update the version number to latest).

  • Require the cljsjs package in the (ns) section of your code: (:require material-ui)

  • Finally, you can reference the imported JavaScript objects directly by name: js/MaterialUI

It is sometimes difficult to figure out the JavaScript names. Generally you need to refer to the original JS package.

In the case of material-ui specifically, there are :global-exports helper mappings which you can see here, and these allow you to reference the library more conveniently and directly with material-ui.

Note that it is also quite often possible to import npm modules directly now with :npm-deps.

Upvotes: 1

ClojureMostly
ClojureMostly

Reputation: 4713

The package [cljsjs/material] you're referencing does NOT use http://material-ui.com/ but instead uses: http://www.getmdl.io/

So there is NO <FlatButton>.

Upvotes: 1

Related Questions