This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-04-12
Channels
- # beginners (47)
- # boot (5)
- # bristol-clojurians (1)
- # cider (45)
- # clara (2)
- # cljs-dev (11)
- # cljsrn (47)
- # clojure (169)
- # clojure-brasil (2)
- # clojure-dusseldorf (22)
- # clojure-finland (1)
- # clojure-italy (9)
- # clojure-nl (3)
- # clojure-poland (2)
- # clojure-russia (4)
- # clojure-spec (79)
- # clojure-uk (105)
- # clojurescript (59)
- # core-async (41)
- # cursive (31)
- # datomic (10)
- # devcards (1)
- # duct (6)
- # editors (9)
- # emacs (12)
- # figwheel (1)
- # fulcro (50)
- # java (4)
- # mount (1)
- # off-topic (47)
- # onyx (33)
- # pedestal (1)
- # protorepl (1)
- # re-frame (32)
- # reagent (45)
- # ring-swagger (6)
- # shadow-cljs (100)
- # tools-deps (6)
- # uncomplicate (27)
- # vim (3)
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
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
@lgessler yeah callback refs aren't going anywhere. Do you have a pointer to the createRef function you mentioned?
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."
interesting. I wonder why they changed it
callback refs seemed like a great solution to me
@pesterhazy I think they changed it to make the forwarding ref api happen https://reactjs.org/docs/forwarding-refs.html
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
correct?
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
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)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."
@pesterhazy I think they changed it to make the forwarding ref api happen https://reactjs.org/docs/forwarding-refs.html
@fj.abanses I havenāt used it but that kind of interop looks typical
looks good
@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]))])
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]]]
Whatās a good Reagent table component to use, with filtering, sorting, etc?
if you don't mind using bootstrap: https://allenfang.github.io/react-bootstrap-table/
it's in cljsjs
Iāll check it out, thanks!
react table is good too https://react-table.js.org/#/story/simple-table
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
( 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?
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.
There is this jsx to hiccup translator https://github.com/madvas/jsx-to-clojurescript
and of course be sure to read https://github.com/reagent-project/reagent/blob/master/docs/InteropWithReact.md
@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
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.
@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 š
