2023-02-10 reagent | Clojure Slack Archive

reagent

Muhammad Hamza Chippa 2023-02-10T13:02:46.831759Z

How to replicate this in the reagent ?

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

2023-02-10T13:06:58.189929Z

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 Chippa 2023-02-10T13:08:03.895499Z

I guess it will be something like this

(let [[setCenter] (useReactFlow)])

2023-02-10T13:09:12.026369Z

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

2023-02-10T13:11:34.036609Z

(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 Chippa 2023-02-10T13:12:08.553729Z

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

🙏 1

Muhammad Hamza Chippa 2023-02-10T13:18:02.347319Z

getting this error

p-himik 2023-02-10T13:26:06.715489Z

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

hkjels 2023-02-10T22:26:15.080509Z

@mhamzachippa 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/

Clojurians Log v2

reagent