Search code examples
clojurescriptmaterial-uireagentreactcsstransitiongroup

ClojureScript Reagent Material ui, I want to use CssTransitionGroups

I use ClojureScript in my project. In the start I used Reagent and Material ui especially for the Stepper component. My problem is that I want to use CssTransitionGroups, which for I need to import react-with-addons. The problem is the two "libraries" aren't working together. This is the project.clj

(defproject ironrainbow "0.1.0-SNAPSHOT"
:dependencies [[org.clojure/clojure        "1.8.0"]
             [org.clojure/clojurescript  "1.9.89"]
             [org.clojure/core.async "0.1.346.0-17112a-alpha"]
             [cljs-ajax "0.5.8"]
             [org.clojure/data.json "0.2.6"]
             [re-frame "0.8.0"]

             [reagent "0.6.0" :exclusions [cljsjs/react]]
             [cljsjs/react-with-addons "15.2.1-0"]
             [cljs-react-material-ui "0.2.21"]
             [cljsjs/react-motion "0.3.0-0"]
             [secretary "1.2.3"]]


 :plugins [[lein-cljsbuild "1.1.3"]]

:min-lein-version "2.5.3"

:source-paths ["src/clj"]

:clean-targets ^{:protect false} ["resources/public/js/compiled" "target"]

:figwheel {:css-dirs ["resources/public/css"]}

:profiles
{:dev
{:dependencies []

:plugins      [[lein-figwheel "0.5.4-3"]]}}


:cljsbuild
{:builds
[{:id           "dev"
 :source-paths ["src/cljs"]
 :figwheel     {:on-jsload "ironrainbow.core/mount-root"}
 :compiler     {:main                 ironrainbow.core
                :output-to            "resources/public/js/compiled/app.js"
                :output-dir           "resources/public/js/compiled/out"
                :asset-path           "js/compiled/out"
                :source-map-timestamp true}}

{:id           "min"
 :source-paths ["src/cljs"]
 :compiler     {:main            ironrainbow.core
                :output-to       "resources/public/js/compiled/app.js"
                :optimizations   :advanced
                :closure-defines {goog.DEBUG false}
                :pretty-print    false}}]})

So the first step to use CssTransitionGroups is to define 

(def css-transition-group
(reagent/adapt-react-class js/React.addons.CSSTransitionGroup))

But that won't work unless Material.ui is not included. Somehow the material.ui is overwriting the React.addons. If you try in the browser's console to type React.addons you get undefined if material.ui is required too. Separately they both work.

Solution

  • I released new version of cljs-react-material-ui and cljsjs/material-ui, which contains react addons. You can access it by js/React.addons or via library components, for more please see: https://github.com/madvas/cljs-react-material-ui#react-with-addons