Fork me on GitHub
#reagent
<
2018-04-12
>
lgessler04:04:35

Hi, what's the recommended way of handling refs with Reagent these days? I found a snippet (https://gist.github.com/pesterhazy/4d9df2edc303e5706d547aeabe0e17e1), but it's from 2016 and recommends callback refs while the official react guide recommends createRef

lgessler04:04:21

oh--just found what appears to be the official reagent documentation for it. nevermind šŸ™‚ https://github.com/reagent-project/reagent/blob/master/docs/FAQ/UsingRefs.md

pesterhazy09:04:34

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

lgessler15:04:49

https://reactjs.org/docs/refs-and-the-dom.html 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."

pesterhazy15:04:51

interesting. I wonder why they changed it

pesterhazy15:04:03

callback refs seemed like a great solution to me

pesterhazy16:04:24

reifying references to components

pesterhazy16:04:37

turning them into something to pass around?

justinlee16:04:17

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

pesterhazy17:04:41

that makes sense

pesterhazy17:04:58

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

justinlee17:04:38

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

pesterhazy17:04:13

I like the way that React is making incremental improvements

pesterhazy17:04:23

Without breaking anything in the process

pesterhazy17:04:41

Pretty impressive, especially compared to peer frameworks

justinlee17:04:09

They have like 300 open issues on over 12000 reported

justinlee17:04:26

It really crazy how much work has gone into that thing

javi14:04:21

Hi, I am considering using "https://github.com/drcmda/react-spring" in a project as it looks quite nice and declarative. According to the repo it based of "https://github.com/animatedjs/animated". If run an "https://gist.github.com/dvcrn/52957f11a5f24eefba63" 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]
  [:div.pa2.bg-green.w-50.tc.near-white.mv2 {: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
[:div.ma4
 [say-hi "Alex"] 
 [say-hi "Lola"] ]
cheers! (edit/links) (edit/answer added)

lgessler15:04:49

https://reactjs.org/docs/refs-and-the-dom.html 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."

justinlee16:04:12

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

pesterhazy16:04:02

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

pesterhazy16:04:56

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

javi16:04:27

@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]))]) 

javi17:04:03

wrapping it now in a generic container

bmo 4
javi18:04:59

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}}
  [:div.pa5.bg-blue.ma2.tc.near-white  "some content" [:div 44]]]
 
 

jmckitrick18:04:42

Whatā€™s a good Reagent table component to use, with filtering, sorting, etc?

kurt-o-sys18:04:32

it's in cljsjs

jmckitrick19:04:34

Iā€™ll check it out, thanks!

justinlee19:04:05

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

reefersleep19:04:35

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 ( https://github.com/atlassian/react-beautiful-dnd/issues/427 ), 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?

reefersleep19:04:35

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

justinlee19:04:44

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

reefersleep19:04:05

@lee.justin.m those are great resources! Maybe I can patch it together with these šŸ˜„

reefersleep21:04:11

@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 http://codesandbox.io 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.

justinlee21:04:05

@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)

reefersleep21:04:17

I will :thumbsup: šŸ‘

reefersleep21:04:43

@lee.justin.m Iā€™ve achieved dnd! Now I just need to actually make it beautiful. Visually as well as in code šŸ˜„

bubblebobble 4