Fork me on GitHub
#reagent
<
2015-10-22
>
mbertheau03:10:10

Thanks for your input simple_smile

abtv08:10:26

Hello. Is there any component like textareaautoresize, which works for Reagent? Something like TextareaAutosize which works with Reagent.

abtv08:10:42

I have such a component, but every time I type something my caret position moves to the end of textarea

colin.yates09:10:48

@abtv - that is a well known issue and happens when the component re-renders on every state change. Typically because a keypress updates an atom that is defined in the render fn. Moving the atom out of the component usually works.

abtv09:10:44

@colin.yates: If I change it to a usual :text-area it works perfect. Can it still be the problem you describe? By the way, my atom created like a closure...

colin.yates09:10:36

that’s interesting - that it works if text-area. Not sure then - a gist might help others help?

colin.yates09:10:35

if you mean (defn my-comp [] (let [my-atom (ratom/atom nil)] [:input {:value @my-atom :on-change #(reset! my-atom (-> % .-target .-value)}])) then yes, that will be a problem - move the atom out of the defn or have the defn return an fn

abtv09:10:35

just a moment...

abtv09:10:31

I'll create a simple project

abtv09:10:42

to demonstrate it

Pablo Fernandez09:10:17

Is anybody aware of something like this https://github.com/chieffancypants/angular-loading-bar that works with reagent?

abtv09:10:03

@colin.yates: you can see it in action

abtv09:10:40

I think problem can be with my TextareaAutosize.js. Maybe someone has a better alternative?

krisajenkins10:10:01

Ola! Does anyone know if Reagent supports multiple mount points, like:

(reagent/render-component [childcaller]
                          (.-body js/document "mount-point-1"))

(reagent/render-component [childcaller]
                          (.-body js/document "mount-point-2”))
(cf https://github.com/reagent-project/reagent/issues/190) ?

krisajenkins10:10:49

(╭ರ_•́)

colin.yates10:10:32

@abtv: I can’t see anything obvious - it is almost certainly in the text-area-react… maybe remove the autosize as well?

abtv10:10:14

@colin.yates: unfortunately I have to implement autosize

colin.yates10:10:14

@abtv - sorry, out of ideas (and time :-()

pepe10:10:38

@krisajenkins: It sure does, for me anyway:(defn mount-header [] (reagent/render [header] (.getElementById js/document "header"))) (defn mount-cart [] (reagent/render [cart/page] (.getElementById js/document "cart"))) (defn mount-app [] (reagent/render [current-page] (.getElementById js/document "app")))

pepe10:10:54

sorry for formatting 😞

krisajenkins10:10:07

@pepe - weird - I wonder if that’s because you’re selecting by ID and I’m selecting by Class. Lemme try that… simple_smile

krisajenkins10:10:31

Hmm…no. I even selecting by ID I only get one of my targets running (the first).

pepe10:10:00

well thing is I have function mount-root which just calls all those functions, and this function is then called in the exported main function

krisajenkins10:10:50

Hmm…I’m a bit baffled then…I have a similar setup...

krisajenkins10:10:16

Anyway, thanks very much @pepe - if someone has that working, I’m sure I can track down why ours isn’t. simple_smile

pepe10:10:12

have you tried to debug it from figwheel console? And you are wellcom 😉

krisajenkins11:10:57

Aha, I think I may have cracked it. Thanks again - just knowing it’s possible is a huge help. simple_smile

pepe12:10:07

@krisajenkins: great, I am glad to hear it

gadfly36115:10:27

@krisajenkins yeah definitely possible, ive done same way that @pepe suggests

tord19:10:15

What's the recommended way of doing smooth, complex animations in Reagent these days? I'm experimenting with react-motion, using [this](https://github.com/ducky427/reagent-motion-demos) as a starting point, but it's harder than I would like.

tord19:10:03

I've also tried simply using requestAnimationFrame to update ratoms, but that results in too choppy animations, especially on mobile devices.