https://cljdoc.org/d/reagent/reagent/1.0.0-alpha2/doc/frequently-asked-questions/how-do-i-use-react-s-refs- describes how to use a callback function on a :ref to take the DOM element set by Reagent and store a reference to it in an atom. When we're going the other way, and a hook from a React library is giving us a ref, is it correct to say that setting :ref to that ref will correctly cause the component to use the ref returned by the hook? Example of doing this with https://docs.dndkit.com/api-documentation/draggable, but I have a suspicions that the ref isn't getting set correctly, so I wanted to double-check my understanding:
(defn draggable []
(let [hook-ret (useDraggable (clj->js {:id "draggable"}))
{:keys [attributes listeners setNodeRef transform] :as converted-hook} (js->clj hook-ret)]
(r/as-element
[:div {:ref setNodeRef} (str "Draggable element: " converted-hook)])))
It should be fine.
However, never use js->clj
with React components. It's deep, not shallow - it will convert everything that you'd want to preserve. Just use interop.