Fork me on GitHub

I’m struggling to understand the interop between react components, state and children. I’m trying to reproduce the simple first example here

import { Transition } from 'react-transition-group';

const duration = 300;

const defaultStyle = {
  transition: `opacity ${duration}ms ease-in-out`,
  opacity: 0,

const transitionStyles = {
  entering: { opacity: 1 },
  entered:  { opacity: 1 },
  exiting:  { opacity: 0 },
  exited:  { opacity: 0 },

const Fade = ({ in: inProp }) => (
  <Transition in={inProp} timeout={duration}>
    {state => (
      <div style={{
        I'm a fade Transition!
For the sake of simplicity, this is what I have.
(def default-style {:transition "opacity 200ms ease-in-out"
                      :opacity    0})

(def transition-styles {:entering {:opacity 1}
                        :entered  {:opacity 1}
                        :exiting  {:opacity 0}
                        :exited   {:opacity 0}})

(def transition (interop/react-factory Transition))

(defsc my-modal [this {:ui/keys [modal-open?]}]
  {:query [:ui/modal-open?]}
  (transition {:in modal-open?
               :timeout 300}
    (div {:style (merge default-style #_"how do I access state as per the jsx example")})))
I know I’m missing some fundamental piece here. Can someone please help me understand this and get this react interop working?


Of course there is a perfectly good example in the book to get me where I needed to be


I’ll go with that approach unless anyone has a better suggestion.


have you tried passing a function to the transition instead of the div? you should be able to use the code in the book as a starter


@danvingo Yes. That’s what the example in the book does. Thanks.