Fork me on GitHub

Hi, what's the recommended way of handling refs with Reagent these days? I found a snippet (, but it's from 2016 and recommends callback refs while the official react guide recommends createRef


oh--just found what appears to be the official reagent documentation for it. nevermind 🙂


@lgessler yeah callback refs aren't going anywhere. Do you have a pointer to the createRef function you mentioned?

lgessler15:04:49 Specifically: "Note The examples below have been updated to use the React.createRef() API introduced in React 16.3. If you are using an earlier release of React, we recommend using callback refs instead."


interesting. I wonder why they changed it


callback refs seemed like a great solution to me


reifying references to components


turning them into something to pass around?


so you can wrap a component and forward all the props, including the ref. that way the parent gets a ref to the right child


that makes sense


it's intended to solve the problem where wrapping in a HoC breaks refs


that’s what i think. i haven’t found a post that says “we did X to solve the Y problem” so i’m reading in between the lines


I like the way that React is making incremental improvements


Without breaking anything in the process


Pretty impressive, especially compared to peer frameworks


They have like 300 open issues on over 12000 reported


It really crazy how much work has gone into that thing


Hi, I am considering using "" in a project as it looks quite nice and declarative. According to the repo it based of "". If run an "" example of reagent+animated and works well. So the question is, has anyone tried react-spring with reagent? found any issues? worked? ;; so i replied to myself and a quick test seems to work... a bit ugly at the moment as the render fn doesn't like hiccup and i have to reactify the comp... but first steps first

(def Spring (.-Spring js/ReactSpring))

(defn exported [props]
  [ {:style (:style props)} "Hi, " (:name props)])

(def react-comp (r/reactify-component exported))

(defn say-hi [name]
  [:> Spring {:config {:tension 0 :friction 100}
              :from {:opacity 0}
              :to {:opacity 1}}
             (fn [e] (r/create-element react-comp #js{:name name
                                                      :style e}))]) 
;; when render
 [say-hi "Alex"] 
 [say-hi "Lola"] ]
cheers! (edit/links) (edit/answer added)

lgessler15:04:49 Specifically: "Note The examples below have been updated to use the React.createRef() API introduced in React 16.3. If you are using an earlier release of React, we recommend using callback refs instead."


@fj.abanses I haven’t used it but that kind of interop looks typical


@fj.abanses, consider #(r/as-element [...]) as well


as in #(r/as-element [exported {:name "asdf"}])


@lee.justin.m thanks! @pesterhazy thanks, it works and makes it much easier.

(defn say-hi [name]
  [:> Spring {:config {:tension 0 :friction 100}
              :from {:opacity 0 :left 0}
              :to {:opacity 1}}
             (fn [e] (r/as-element [:h1 {:style e } name]))]) 


wrapping it now in a generic container

bmo 4

WIP as i get to know the lib. not sure how reagent will play with components like Transition that work when mounting and unmounting

(def Spring (.-Spring js/ReactSpring))

(defn wrap [cls config content] 
    [:> cls config (fn [e] 
                        (let [[tag & rs] content
                              has-props? (map? (first rs))
                              props (if has-props? (merge (first rs) {:style e}) {:style e})]
                             (r/as-element (into [tag props] (if has-props? (rest rs) rs)))))])

 [wrap Spring {:config {:tension 0 :friction 100}
              :from {:opacity 0}
              :to {:opacity 1}}
  [  "some content" [:div 44]]]


What’s a good Reagent table component to use, with filtering, sorting, etc?


it's in cljsjs


I’ll check it out, thanks!


react-virtualized has a table implementation. it is very complicated but if you have large datasets it’s completely incredible tech


I’d like to use react-beautiful-dnd in my reagent app. I’m finding it a little hard… The cljsjs package is not documented, and I don’t see any examples - the closest is someone saying “just use adapt-react-class and as-element ( ), not very helpful. The JS examples are so foreign for me, both using JS and React features I’m not accustomed to. I’m getting error messages that I don’t understand, and which I have to parse through the lens of a JS React user, with CLJS and Reagent on top. It’s a bit much. Does anyone know any hidden ( 🙂 ) examples of using react-beautiful-dnd in a reagent app, or know of more helpful resources?


If I manage to get it working, I’ll write up an example for the cljsjs package.


It’s going to be challenging to use a library written in javascript with react without knowing either of those technologies.


@lee.justin.m those are great resources! Maybe I can patch it together with these 😄


@lee.justin.m I’m very happy with my progress now. The InteropWithReact source has helped me greatly, along with eager googling in respect to more recent JS syntax (I haven’t used it actively for quite some time), React syntax and a good react-beautiful-dnd example. I’ve now got some code I understand, and which doesn’t produce errors - it doesn’t yet actually drag and drop, but I’m very close to that.


@reefersleep great! i’m wrote the interop guide so if you have any feedback or examples that might help you, let me know (or even better just edit the page directly and submit a PR)


I will :thumbsup: 👏


@lee.justin.m I’ve achieved dnd! Now I just need to actually make it beautiful. Visually as well as in code 😄

bubblebobble 4