CODEWITHSUNDEEP
clojurescriptmaterial-uireagentreactcsstransitiongroup
Paul Cristian Martin
Paul Cristian Martin

Reputation: 83

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.

Upvotes: 1

Views: 1863

Answers (1)

ma2s
ma2s

Reputation: 1312

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

Upvotes: 3

Related Questions