{"id":16556212,"url":"https://github.com/madvas/cljs-react-material-ui","last_synced_at":"2025-10-25T21:07:33.065Z","repository":{"id":57714154,"uuid":"56691630","full_name":"madvas/cljs-react-material-ui","owner":"madvas","description":"Clojurescript library for using material-ui.com","archived":false,"fork":false,"pushed_at":"2018-09-03T14:09:59.000Z","size":72,"stargazers_count":205,"open_issues_count":14,"forks_count":32,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-02-04T12:24:07.697Z","etag":null,"topics":["clojurescript","clojurescript-library","material-ui","om","react","reagent","rum"],"latest_commit_sha":null,"homepage":null,"language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"epl-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/madvas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-20T13:59:35.000Z","updated_at":"2024-01-03T17:35:39.000Z","dependencies_parsed_at":"2022-09-26T21:31:13.832Z","dependency_job_id":null,"html_url":"https://github.com/madvas/cljs-react-material-ui","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madvas%2Fcljs-react-material-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madvas%2Fcljs-react-material-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madvas%2Fcljs-react-material-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/madvas%2Fcljs-react-material-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/madvas","download_url":"https://codeload.github.com/madvas/cljs-react-material-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289428,"owners_count":20914464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clojurescript","clojurescript-library","material-ui","om","react","reagent","rum"],"created_at":"2024-10-11T20:03:49.209Z","updated_at":"2025-10-25T21:07:32.977Z","avatar_url":"https://github.com/madvas.png","language":"Clojure","funding_links":[],"categories":["Clojure"],"sub_categories":[],"readme":"# cljs-react-material-ui\n\nThis library is interop to get [Material-UI](http://www.material-ui.com/#/) working in Clojurescript.\n\nCurrent Material-UI version: `0.19.0`\n\n###### See Om.Next example app here \nhttps://github.com/madvas/cljs-react-material-ui-example\ngit\n\n## Warning version update \u003e= 0.2.43\nWhen using [AutoComplete](http://www.material-ui.com/#/components/auto-complete) use props `:dataSource` and \n`:dataSourceConfig` in camelCase form, since `data-` is interpreted as HTML data attribute\n\n## Warning version update \u003e= 0.2.48\nSince this version you don't need to exclude `cljsjs/react` and `cljsjs/react-dom`. Material-ui bundle doesn't contain own React anymore.\nAlso don't forget to rename your `on-touch-tap` into `on-click`. \nUpdate your Clojurescript version (\u003e= 1.9.908) \n\n## Installation\n- Add `[cljs-react-material-ui \"0.2.48\"]` to your dependencies\n- Add `[cljsjs/react \"15.6.1-1\"]` or newer version to your dependencies\n- Add `[cljsjs/react-dom \"15.6.1-1\"]` or newer version to your dependencies\n\n## Usage\n\n  ```clojure\n  (ns cljs-react-material-ui-example.core\n    (:require [cljsjs.material-ui]  ; I recommend adding this at the beginning of core file\n                                    ;  so React is always loaded first. It's not always needed\n              [cljs-react-material-ui.core :as ui]\n              [cljs-react-material-ui.icons :as ic]))   ; SVG icons that comes with MaterialUI\n                                                        ; Including icons is not required\n  ```\n\nYou must start your MaterialUI component tree with [ui/mui-theme-provider](http://www.material-ui.com/v0.15.0-beta.2/#/customization/themes), 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.\n```clojure\n(ui/mui-theme-provider\n    {:mui-theme (ui/get-mui-theme)}\n    (ui/paper \"Hello world\"))\n    \n(ui/mui-theme-provider \n    {:mui-theme (ui/get-mui-theme \n        {:palette                   ; You can use either camelCase or kebab-case\n            {:primary1-color (ui/color :deep-orange-a100)} \n         :raised-button \n            {:primary-text-color (ui/color :light-black) \n             :font-weight 200}})}\n    (ui/raised-button\n        {:label   \"Click me\"\n         :primary true}))\n         \n(ui/mui-theme-provider\n    {:mui-theme (ui/get-mui-theme (aget js/MaterialUIStyles \"DarkRawTheme\"))}\n    (ui/paper \"Hello dark world\"))\n```\n\nYou can use all components (icons also) in their kebab-case form. Either with props or without.\n```clojure\n(ui/radio-button\n    {:value          \"some_val\"\n     :label          \"Yes\"\n     :class-name     \"my-radio-class\"\n     :checked-icon   (ic/action-favorite)\n     :unchecked-icon (ic/action-favorite-border)})\n     \n (ui/table-row\n    (ui/table-header-column \"Name\")\n    (ui/table-header-column \"Date\"))\n```\n\n##### Global objects\n```clojure\njs/MaterialUI ; Contains constructors to all components. No need to use directly.\njs/MaterialUIStyles ; Contains everything from material-ui/src/styles/index.js\njs/MaterialUISvgIcons ; Contains constructors to all icons. Exists only when you\n                      ; include icons in your code. No need to use directly.\njs/MaterialUIUtils ; Contains some of util functions provided by MaterialUI\n```\n\n##### Using with Reagent\nWorks with `reagent \"0.6.0-alpha\"` and up. So the dependency may be specified like this:\n\n`[reagent \"0.7.0\"]`\n\nA simple Reagent example is as follows:\n\n```clojure\n(ns crmui-reagent.core\n  (:require\n    [cljsjs.material-ui]\n    [cljs-react-material-ui.core :refer [get-mui-theme color]]\n    [cljs-react-material-ui.reagent :as ui]\n    [cljs-react-material-ui.icons :as ic]\n    [reagent.core :as r]))\n    \n; Example with various components\n(defn home-page []\n  [ui/mui-theme-provider\n   {:mui-theme (get-mui-theme\n                 {:palette {:text-color (color :green600)}})}\n   [:div\n    [ui/app-bar {:title \"Title\"\n                  :icon-element-right\n                   (r/as-element [ui/icon-button\n                                    (ic/action-account-balance-wallet)])}]\n    [ui/paper\n     [:div \"Hello\"]\n     [ui/mui-theme-provider\n      {:mui-theme (get-mui-theme {:palette {:text-color (color :blue200)}})}\n      [ui/raised-button {:label \"Blue button\"}]]\n     (ic/action-home {:color (color :grey600)})\n     [ui/raised-button {:label        \"Click me\"\n                         :icon         (ic/social-group)\n                         :on-click     #(println \"clicked\")}]]]])\n    \n```\n\u0026nbsp;\n##### Using with Rum\n\u0026nbsp;\n```clojure\n(ns crmui-rum.core\n  (:require\n    [cljs-react-material-ui.core :refer [get-mui-theme color]]\n    [cljs-react-material-ui.icons :as ic]\n    [cljs-react-material-ui.rum :as ui]\n    [rum.core :as rum]))\n    \n(rum/defc thing1\n          []\n          [:div \"content1\"])\n\n(defn home-page []\n  (ui/mui-theme-provider\n    {:mui-theme (get-mui-theme)}\n    [:div\n     (ui/app-bar {:icon-element-right (ui/icon-button (ic/action-accessibility))})\n     (ui/tabs\n       (ui/tab {:label \"one\"}\n                [:div [\"hey\"\n                       (ui/paper \"yes\")]])\n       (ui/tab {:label \"two\"} (thing1))\n       (ui/tab {:label \"drei\"}\n                [:div\n                 (ui/paper {} \"Ima paper\")]))]))\n    \n```\n\n## Selectable List\nThis library provides pre-made selectable list, whrereas in MaterialUI has to be created manually.\nYou can access orig `makeSelectable` function as `cljs-react-material-ui.core/make-selectable`\nSee example in reagent:\n```clojure\n(defn selectable-list-example []\n  (let [list-item-selected (atom 1)]\n    (fn []\n      [ui/selectable-list\n       {:value @list-item-selected\n        :on-change (fn [event value]\n                     (reset! list-item-selected value))}\n       [ui/subheader {} \"Selectable Contacts\"]\n       [ui/list-item\n        {:value 1\n         :primary-text \"Brendan Lim\"\n         :nested-items\n         [(r/as-element\n            [ui/list-item\n             {:value 2\n              :key 8\n              :primary-text \"Grace Ng\"}])]}]\n       [ui/list-item\n        {:value 3\n         :primary-text \"Kerem Suer\"}]\n       [ui/list-item\n        {:value 4\n         :primary-text \"Eric Hoffman\"}]\n       [ui/list-item\n        {:value 5\n         :primary-text \"Raquel Parrado\"}]])))\n```\n\n\n## MaterialUI Chip Input\nIf you feel like using [MaterialUIChipInput](https://github.com/TeamWertarbyte/material-ui-chip-input) all you need to\ndo is add `[cljsjs/material-ui-chip-input \"0.17.0-0\"]` (or newer version) into your project.clj. \nAnd now you can use chip-input according to your favorite framework namespace.\n```clojure\n(ns my.app\n    (:require \n      [cljs-react-material-ui.chip-input.core :refer [chip-input]]\n      [cljs-react-material-ui.chip-input.reagent :refer [chip-input]]\n      [cljs-react-material-ui.chip-input.rum :refer [chip-input]]))\n```\n\n\n## Troubleshooting\n##### Caret moves to the end when editing a text field\nThis happens due to async rendering of clojurescript react libraries.\nLuckily, there is a workaround, which fixes most of use cases: Instead of `:value` prop use `:default-value` e.g:\n```clojure\n(defn simple-text-field [text]\n  (let [text-state (r/atom text)]\n    (fn []\n      [rui/text-field\n       {:id \"example\"\n        :default-value @text-state\n        :on-change (fn [e] (reset! text-state (.. e -target -value)))}])))\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadvas%2Fcljs-react-material-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmadvas%2Fcljs-react-material-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadvas%2Fcljs-react-material-ui/lists"}