Fork me on GitHub
#reagent
<
2021-03-28
>
Aaron Decker02:03:57

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)])))

p-himik10:03:07

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.

👍 1