Need help with cljs-react-material-ui?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

madvas
205 Stars 36 Forks Eclipse Public License 1.0 60 Commits 14 Opened issues

Description

Clojurescript library for using material-ui.com

Services available

!
?

Need anything else?

Contributors list

# 113,556
Clojure
Clojure...
freelan...
solidit...
48 commits
# 553
Clojure
Clojure...
Shell
React
1 commit
# 508,657
Clojure
React
materia...
Clojure...
1 commit
# 395,049
Clojure
Clojure...
React
Lisp
1 commit
# 546,323
React
Clojure
materia...
Clojure...
1 commit
# 62,772
iphone
React
C
nodemon
1 commit

cljs-react-material-ui

This library is interop to get Material-UI working in Clojurescript.

Current Material-UI version:

0.19.0
See Om.Next example app here

https://github.com/madvas/cljs-react-material-ui-example git

Warning version update >= 0.2.43

When using AutoComplete use props

:dataSource
and
:dataSourceConfig
in camelCase form, since
data-
is interpreted as HTML data attribute

Warning version update >= 0.2.48

Since this version you don't need to exclude

cljsjs/react
and
cljsjs/react-dom
. Material-ui bundle doesn't contain own React anymore. Also don't forget to rename your
on-touch-tap
into
on-click
. Update your Clojurescript version (>= 1.9.908)

Installation

  • Add
    [cljs-react-material-ui "0.2.48"]
    to your dependencies
  • Add
    [cljsjs/react "15.6.1-1"]
    or newer version to your dependencies
  • Add
    [cljsjs/react-dom "15.6.1-1"]
    or newer version to your dependencies

Usage

  (ns cljs-react-material-ui-example.core
    (:require [cljsjs.material-ui]  ; I recommend adding this at the beginning of core file
                                    ;  so React is always loaded first. It's not always needed
              [cljs-react-material-ui.core :as ui]
              [cljs-react-material-ui.icons :as ic]))   ; SVG icons that comes with MaterialUI
                                                        ; Including icons is not required

You must start your MaterialUI component tree with ui/mui-theme-provider, which must have exactly one direct child and defined theme. Use the same pattern when you want to change theme for some children, see example app. ```clojure (ui/mui-theme-provider {:mui-theme (ui/get-mui-theme)} (ui/paper "Hello world"))

(ui/mui-theme-provider {:mui-theme (ui/get-mui-theme {:palette ; You can use either camelCase or kebab-case {:primary1-color (ui/color :deep-orange-a100)} :raised-button {:primary-text-color (ui/color :light-black) :font-weight 200}})} (ui/raised-button {:label "Click me" :primary true}))

(ui/mui-theme-provider {:mui-theme (ui/get-mui-theme (aget js/MaterialUIStyles "DarkRawTheme"))} (ui/paper "Hello dark world")) ```

You can use all components (icons also) in their kebab-case form. Either with props or without. ```clojure (ui/radio-button {:value "some_val" :label "Yes" :class-name "my-radio-class" :checked-icon (ic/action-favorite) :unchecked-icon (ic/action-favorite-border)})

(ui/table-row (ui/table-header-column "Name") (ui/table-header-column "Date")) ```

Global objects
js/MaterialUI ; Contains constructors to all components. No need to use directly.
js/MaterialUIStyles ; Contains everything from material-ui/src/styles/index.js
js/MaterialUISvgIcons ; Contains constructors to all icons. Exists only when you
                      ; include icons in your code. No need to use directly.
js/MaterialUIUtils ; Contains some of util functions provided by MaterialUI
Using with Reagent

Works with

reagent "0.6.0-alpha"
and up. So the dependency may be specified like this:

[reagent "0.7.0"]

A simple Reagent example is as follows:

(ns crmui-reagent.core
  (:require
    [cljsjs.material-ui]
    [cljs-react-material-ui.core :refer [get-mui-theme color]]
    [cljs-react-material-ui.reagent :as ui]
    [cljs-react-material-ui.icons :as ic]
    [reagent.core :as r]))

; Example with various components (defn home-page [] [ui/mui-theme-provider {:mui-theme (get-mui-theme {:palette {:text-color (color :green600)}})} [:div [ui/app-bar {:title "Title" :icon-element-right (r/as-element [ui/icon-button (ic/action-account-balance-wallet)])}] [ui/paper [:div "Hello"] [ui/mui-theme-provider {:mui-theme (get-mui-theme {:palette {:text-color (color :blue200)}})} [ui/raised-button {:label "Blue button"}]] (ic/action-home {:color (color :grey600)}) [ui/raised-button {:label "Click me" :icon (ic/social-group) :on-click #(println "clicked")}]]]])

 

Using with Rum

  ```clojure (ns crmui-rum.core (:require [cljs-react-material-ui.core :refer [get-mui-theme color]] [cljs-react-material-ui.icons :as ic] [cljs-react-material-ui.rum :as ui] [rum.core :as rum]))

(rum/defc thing1 [] [:div "content1"])

(defn home-page ]]) (ui/tab {:label "two"} (thing1)) (ui/tab {:label "drei"} [:div (ui/paper {} "Ima paper")]))]))

## Selectable List
This library provides pre-made selectable list, whrereas in MaterialUI has to be created manually.
You can access orig `makeSelectable` function as `cljs-react-material-ui.core/make-selectable`
See example in reagent:
```clojure
(defn selectable-list-example []
  (let [list-item-selected (atom 1)]
    (fn []
      [ui/selectable-list
       {:value @list-item-selected
        :on-change (fn [event value]
                     (reset! list-item-selected value))}
       [ui/subheader {} "Selectable Contacts"]
       [ui/list-item
        {:value 1
         :primary-text "Brendan Lim"
         :nested-items
         [(r/as-element
            [ui/list-item
             {:value 2
              :key 8
              :primary-text "Grace Ng"}])]}]
       [ui/list-item
        {:value 3
         :primary-text "Kerem Suer"}]
       [ui/list-item
        {:value 4
         :primary-text "Eric Hoffman"}]
       [ui/list-item
        {:value 5
         :primary-text "Raquel Parrado"}]])))

MaterialUI Chip Input

If you feel like using MaterialUIChipInput all you need to do is add

[cljsjs/material-ui-chip-input "0.17.0-0"]
(or newer version) into your project.clj. And now you can use chip-input according to your favorite framework namespace.
clojure
(ns my.app
    (:require 
      [cljs-react-material-ui.chip-input.core :refer [chip-input]]
      [cljs-react-material-ui.chip-input.reagent :refer [chip-input]]
      [cljs-react-material-ui.chip-input.rum :refer [chip-input]]))

Troubleshooting

Caret moves to the end when editing a text field

This happens due to async rendering of clojurescript react libraries. Luckily, there is a workaround, which fixes most of use cases: Instead of

:value
prop use
:default-value
e.g:
clojure
(defn simple-text-field [text]
  (let [text-state (r/atom text)]
    (fn []
      [rui/text-field
       {:id "example"
        :default-value @text-state
        :on-change (fn [e] (reset! text-state (.. e -target -value)))}])))

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.