Clojurians Log v2

You probably won't get any answers because it's a single library among who knows how many. I don't think I have ever seen a React library that doesn't work with Reagent. Have you actually tried using that one?

I did. It successfully applies some properties to my child element but then the animation won’t start and the element looks distorted. I am wondering if I have to wrap my hiccup [:div] child in some sort of adapter.

It might be loading some CSS that you have to load in some way that's compatible with your setup.

That is not it, it's supposed to update the style prop every frame until the animation ends but it only does it once for the initial frame.

Out of curiosity, I just tried porting this example: https://codesandbox.io/s/8130rn9q2?file=/src/index.js Seems to be working just fine with React 17.0.2 and Reagent 1.2.0:

(ns flip-test.core
  (:require [reagent.core :as r]
            [reagent.dom :as r.dom]
            ["react" :as react]
            ["react-flip-toolkit" :as flip-toolkit]))

(defn animated-square []
  (r/with-let [fullscreen? (r/atom false)]
    [:> flip-toolkit/Flipper {:flip-key @fullscreen?}
     [:> flip-toolkit/Flipped {:flip-id "square"}
      [:div {:style    (if @fullscreen?
                         {:position         :fixed
                          :top              0
                          :left             0
                          :width            "100%"
                          :height           "100%"
                          :cursor           :pointer
                          :background-color :blue}
                         {:width            "5rem"
                          :height           "5rem"
                          :cursor           :pointer
                          :background-color :blue})
             :on-click #(swap! fullscreen? not)}]]]))

(defn main-panel []
  [:f> animated-square])

Interesting. Which version of react-flip-toolkit are you on?

The latest.

Ok, thanks a lot!

It also might be that you track the animation state in some ratom and then deref that ratom in the same component or in its parent. It might potentially lead to problems if not done properly/in a way that's not compatible with the JS component.

I am doing the same thing as you except I'm missing the :>f. I'm at work right now, I'll be looking into this later. Thanks for your help so far! 😃

Sure thing.

Okay, my problem was unrelated to reagent. Apparently this library does not work correctly when being used inside a shadow root. Thanks again for the help, sorry for having wasted your time!

Ah, NP.