reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
arttuka 2020-04-24T06:23:29.233200Z

You can't use React hooks in Reagent components: https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#hooks

arttuka 2020-04-24T06:23:53.233500Z

that doc has an example on how to work around it

Andrea Russo 2020-04-24T09:12:55.233700Z

That solves that problem! Many thanks!

Jp Soares 2020-04-24T13:04:14.234Z

It looks like I should change the material-ui elements to make it compatible with Reagent. Is that right?

Jp Soares 2020-04-24T14:05:14.234200Z

I see that with another react component it works, so the problem is specificaly with material-ui, but I was using it before with reagent.. I'll make a repo reproducing the problem in case someone can help me.

juhoteperi 2020-04-24T15:19:13.235500Z

:> can used as a workaround for now. Next Reagent version will make this easier.

Jp Soares 2020-04-24T15:21:00.235800Z

I'm using :> and it doesn't work https://github.com/JpOnline/t1-error/blob/f7f496dae85963c9c5b765ab803d11d01c9ae91d/src/t1/main.cljs#L18

pcj 2020-04-24T18:03:49.236Z

You can use hooks in reagent components but is a bit cumbersome. Here is an example from a personal project:

(def CardInner
  (r/reactify-component
   (fn []
     [c/Paper "worked"])))

(def AnimatedDiv (oget animated "div"))

(defn Card
  []
  (let [[props set] (useSpring (fn [] #js{:x 0 :r 0}))
        x (oget props "x")
        r (oget props "r")
        bind (useDrag (fn [drag]
                        (let [down? (oget drag "down")
                              [mx] (oget drag "movement")]
                          (set #js{:x (if down? mx 0)
                                   :r (if down? (/ mx 50) 0)}))))]
    (r/create-element
     AnimatedDiv
     (oset! (bind) "!style" #js{:transform (interpolate #js[x r] #(str "translateX(" %1 "px) rotate(" %2 "deg)"))})
     (r/create-element CardInner))))

(defn use-card []
[:div 
(r/create-element Card)])

pcj 2020-04-24T18:08:37.236300Z

When doing this, remember to make sure the component isn't re-mounting all of the time.