Fork me on GitHub
#reagent
<
2023-02-10
>
Muhammad Hamza Chippa13:02:46

How to replicate this in the reagent ?

const {
    project,
    setCenter,
    zoomIn,
    zoomOut,
    fitView,
    addNodes,
    setNodes: setNodesHook,
    addEdges,
    getNodes,
    getEdges,
    deleteElements
  } = useReactFlow();

Mario Trost13:02:58

From the Reagent documentation on using React features: https://cljdoc.org/d/reagent/reagent/1.1.0/doc/tutorials/react-features?q=hooks#hooks

;; This is used with :f> so both Hooks and RAtoms work here
(defn example []
  (let [[count set-count] (react/useState 0)]
    [:div
     [:p "You clicked " count " times"]
     [:button
      {:on-click #(set-count inc)}
      "Click"]])))

(defn root []
  [:div
   [:f> example]])

Muhammad Hamza Chippa13:02:03

I guess it will be something like this

(let [[setCenter] (useReactFlow)])

Mario Trost13:02:12

(let [{:keys [setCenter]} (useReactFlow)])

Mario Trost13:02:34

>

(let [[setCenter] (useReactFlow)])
Almost, but the destructuring is done a bit differently. And it have to do it in a component that is used as a function component, using the :f>
[:f> example]
But I haven't used anything like it myself so far, perhaps someone with more Reagent experience will correct me here

Muhammad Hamza Chippa13:02:08

let me try this, I will tell you whether it is working or not, thank you Mario it is really helpful

🙏 2
p-himik13:02:06

Did you use :f> as suggested above? What is your current code?

hkjels22:02:15

@U02DQ45FQF9 I've been creating a wrapper for reactflow that should make things easier. It's not fully ready yet, but works quite well. https://dnv-opensource.github.io/reagent-flow/