What have you tried so far? And why do you even need r/current-component?

I'm trying to explicitly pass the props as in the example which is not something I've had to think about with reagent before

and I took the r/current-component method from this https://github.com/reagent-project/reagent/blob/master/doc/InteropWithReact.md

The React code that you've provided is written using Reagent as simple as:

(defn page [{:keys [ref number]} & children]
  [:div {:class :demoPage, :ref ref}
   [:h1 "Page Header"]
   (into [:p] children)
   [:p "Page number: " number]])

(defn my-book []
  [:> HTMLFlipBook {:width 300, :height 500}
   [page {:number 1} "Page text"]
   [page {:number 2} "Page text"]
   [page {:number 3} "Page text"]
   [page {:number 4} "Page text"]])

Thank you for spending time and taking a look. I don't totally understand why that works though, is the link I was referencing outdated?

It's not. It's just that you don't need to access the native props in your example.

You shouldn't try translating things verbatim - it will invariably end bad in many cases because you will be using JS/React idioms in the CLJS/Reagent world. Instead, think of what's going on and how to replicate the behavior in Reagent.

Yes, I just find that difficult when I attempt to use react components from libraries

Then the best approach would be to ask a more concrete question, including what library you're trying to use and what code you have come up with so far. More often than not the solution is something extremely simple, like adding an extra as-element or preventing props serialization.

Fair enough, I really do appreciate that you took the time to help. In these situations I try to ask the least specific thing that seems to be the issue, so that I can understand the overall concept. Otherwise the friction that I'm getting here will reoccur every time I attempt something similar.

The library that I'm trying to use in this instance is here - https://www.npmjs.com/package/react-pageflip it creates a bit of animation

currently getting an error - React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined etcetc

That error is meaningless without the code that produced it. ;)

Sorry, it's essentially what you gave me

(defn p [{:keys [ref number]} & children]
  (fn []
    (let [!page (r/atom nil)]
     [:div {:class :demoPage, :ref (fn [ref] (reset! !page ref))}
      [:h1 "Page Header"]
      (into [:p] children)
      [:p "Page number: " number]])))

(defn my-book []
  [:> pf/HTMLFlipBook {:width 300, :height 500}
   [p {:ref 1 :number 1} "Page text"]
   [p {:ref 2 :number 2} "Page text"]
   [p {:ref 3 :number 3} "Page text"]
   [p {:ref 4 :number 4} "Page text"]])

Ah, crap - HTMLFlipBook uses React.cloneElement and assigns its own ref under the hood. Really hate stuff like that.

It's an ugly thing in general 😅

Here's an example of how to use forwardRef with Reagent: https://github.com/reagent-project/reagent/blob/059b26d07ab6dd0145739a6d22bb334ca4f05c1a/examples/react-mde/src/example/core.cljs#L71-L79

would I pass the forwardRef function to the p component in the :ref key?

Not sure what you mean. In your case, it should be something like

(def page
  (react/forwardRef
    (fn page [^js props ref]
      (r/as-element [:div {:ref ref}
                     [:p (.-children props)]  ;; Try `(into [:p] ...)` if this doesn't work.
                     ...]))))

Now I'm getting a strange error invalid hiccup tag

Error: Assert failed: Invalid Hiccup form: [#js {"$$typeof" "Symbol(react.forward_ref)"

Right, that page is a React component and has to be used like one. But Reagent itself would wrap those [page ...] Hiccup vectors with as-element. And you don't need that wrapping. One way to do it would be to use r/create-element inside a React component wrapped in a Reagent component, something like

(defn -my-book []
  (r/create-element pf/HTMLFlipBook
                    #js {:width 300, :height 500}
                    (r/create-element page #js {:number 1} "Page text")
                    ...))

(defn my-book []
  [:> -my-book])

Wow, this is really interesting! sorry to drag you along for the ride

So without using the forwardRef at all?

Oh, with it - it's still there in page.

sorry, only just had a chance to try and I'm still getting Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Are there any tools that can help diagnose what's happening with the import? If i (js/console.log pf) which is the library, it returns an object which is itself a react forwardRef. But the supposed component class is nowhere to be found i.e HTMLFlipBook isn't available within it - not even hidden behind pf/default

Your browser's debugger is the best thing here. You can tell it to break on an exception - that's how I'd do it.

If you won't be able to make it work - create a minimal reproducible example that includes all the steps necessary to build and run it and I'll take a look.

Hi, React and npm interops are quite confusing, I also used to struggle with it too although the final solution is often simple. There are few mistakes in the snippet you sent. First, react-pageflip is in common js style, so you have to import it like ["react-pageflip" :as HTMLFlipBook] . That's why you get the "but got: undefined" error. Second, react/forwardRef needs a react component, so you have to transform the hiccup form with r/as-element like this :

(def Page
  (react/forwardRef
   (fn [props ref]
     (r/as-element
      [:div.demoPage {:ref ref}]))))

Finally, as react/forwardRef gives you a React component, you have to use it as one:

[:> HTMLFlipBook {:width 300 :height 500}
   [:> Page {:number 1} "Page text"]
   ; others pages

Since it's been two days I ping you @U2EJEK2SX else I'm not sure how quickly you would see this

Hi @U01V2D5ALKX, thank you for taking the time to explain, really informative, cheers!