diff --git a/doc/InteropWithReact.md b/doc/InteropWithReact.md
index e1e1d70..14afc97 100644
--- a/doc/InteropWithReact.md
+++ b/doc/InteropWithReact.md
@@ -191,3 +191,4 @@ to always put the call at the top, as in `my-div` here:
- [Material-UI](../examples/material-ui/src/example/core.cljs)
- [React-sortable-hoc](../examples/react-sortable-hoc/src/example/core.cljs)
+- [React-transition-group](../examples/react-transition-group/src/example/core.cljs)
diff --git a/examples/react-transition-group/project.clj b/examples/react-transition-group/project.clj
new file mode 100644
index 0000000..98d9a10
--- /dev/null
+++ b/examples/react-transition-group/project.clj
@@ -0,0 +1,28 @@
+(defproject reagent/react-sortable-hoc-example "0.1.0"
+ :dependencies [[org.clojure/clojure "1.10.1"]
+ [org.clojure/clojurescript "1.10.597"]
+ [reagent "0.10.0"]
+ [figwheel "0.5.19"]
+ [cljsjs/react-transition-group "4.3.0-0"]]
+
+ :plugins [[lein-cljsbuild "1.1.7"]
+ [lein-figwheel "0.5.19"]]
+
+ :figwheel {:repl false
+ :http-server-root "public"}
+
+ :profiles {:dev {:resource-paths ["target/cljsbuild/client" "target/cljsbuild/client-npm"]}}
+
+ :cljsbuild
+ {:builds
+ {:client
+ {:source-paths ["src"]
+ :figwheel true
+ :compiler {:parallel-build true
+ :source-map true
+ :optimizations :none
+ :main "example.core"
+ :output-dir "target/cljsbuild/client/public/js/out"
+ :output-to "target/cljsbuild/client/public/js/main.js"
+ :asset-path "js/out"
+ :npm-deps false}}}})
diff --git a/examples/react-transition-group/resources/public/fade.css b/examples/react-transition-group/resources/public/fade.css
new file mode 100644
index 0000000..f21a371
--- /dev/null
+++ b/examples/react-transition-group/resources/public/fade.css
@@ -0,0 +1,21 @@
+.hide {
+ opacity: 0.01;
+}
+
+.fade-enter {
+ opacity: 0.01;
+}
+
+.fade-enter.fade-enter-active {
+ opacity: 1;
+ transition: opacity 500ms ease-in;
+}
+
+.fade-exit {
+ opacity: 1;
+}
+
+.fade-exit.fade-exit-active {
+ opacity: 0.01;
+ transition: opacity 300ms ease-in;
+}
diff --git a/examples/react-transition-group/resources/public/index.html b/examples/react-transition-group/resources/public/index.html
new file mode 100644
index 0000000..9aff66e
--- /dev/null
+++ b/examples/react-transition-group/resources/public/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ Example
+
+
+
+
+
Reagent example app – see README.md
+
+
+
+
diff --git a/examples/react-transition-group/src/example/core.cljs b/examples/react-transition-group/src/example/core.cljs
new file mode 100644
index 0000000..54335c7
--- /dev/null
+++ b/examples/react-transition-group/src/example/core.cljs
@@ -0,0 +1,72 @@
+(ns example.core
+ (:require [reagent.core :as r]
+ [reagent.dom :as rdom]
+ ["react-transition-group" :refer [TransitionGroup CSSTransition]]
+ [goog.object :as gobj]))
+
+(defn transition-group-example []
+ (let [state (r/atom {:i 1
+ :elements []})]
+ (fn []
+ [:div
+ [:button
+ {:on-click (fn [_]
+ (swap! state (fn [s]
+ (-> s
+ (update :i inc)
+ (update :elements conj (inc (:i s)))))))}
+ "Append element"]
+ [:button
+ {:on-click (fn [_]
+ (swap! state (fn [s]
+ (-> s
+ (update :elements #(vec (drop-last %)))))))}
+ "Remove element"]
+ [:> TransitionGroup
+ {:component "ul"}
+ (for [e (:elements @state)]
+ ;; Looks like :key from props doesn't work with native components
+ ^{:key e}
+ ;; Can't move this to separate function, or reagent will add component in between and transitions break
+ [:> CSSTransition
+ {:classNames "fade"
+ :timeout 500
+ :on-enter #(js/console.log "enter" e)
+ :on-entering #(js/console.log "entering" e)
+ :on-entered #(js/console.log "entered" e)
+ :on-exit #(js/console.log "enter" e)
+ :on-exiting #(js/console.log "exiting" e)
+ :on-exited #(js/console.log "exited" e)}
+ [:li "item " e]])] ])))
+
+(defn css-transition-example []
+ (let [state (r/atom true)]
+ (fn []
+ [:div
+ [:button
+ {:on-click (fn [_] (swap! state not))}
+ "Toggle"]
+ [:> CSSTransition
+ {:classNames "fade"
+ :timeout 500
+ :in @state
+ :on-enter #(js/console.log "enter")
+ :on-entering #(js/console.log "entering")
+ :on-entered #(js/console.log "entered")
+ :on-exit #(js/console.log "enter")
+ :on-exiting #(js/console.log "exiting")
+ :on-exited #(js/console.log "exited")}
+ [:div {:class (if-not @state "hide")} "foobar"]]])))
+
+(defn main []
+ [:div
+ [:h1 "Transition group example"]
+ [transition-group-example]
+
+ [:h1 "CSS transition example"]
+ [css-transition-example]])
+
+(defn start []
+ (rdom/render [main] (js/document.getElementById "app")))
+
+(start)