From 43e0cea91b7ec2ecd5b5debbbdee092a00bf188b Mon Sep 17 00:00:00 2001
From: Klotske <ilya@mokhov.vg>
Date: Thu, 14 Jul 2022 17:53:44 +0000
Subject: [PATCH] Added Droppable hook and integrated ref

---
 components/FlowEditor/Flow.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/FlowEditor/Flow.tsx b/components/FlowEditor/Flow.tsx
index 4f25817..56d3a0c 100644
--- a/components/FlowEditor/Flow.tsx
+++ b/components/FlowEditor/Flow.tsx
@@ -1,3 +1,4 @@
+import { useDroppable } from "@dnd-kit/core";
 import { useState } from "react";
 import ReactFlow, {
   Background,
@@ -14,10 +15,12 @@ const Flow = () => {
     setReactFlowInstance(rfi);
   };
 
+  const { isOver, setNodeRef } = useDroppable({ id: "flow" });
+
   const { nodes, edges, onNodesChange, onEdgesChange, onConnect } = useStore();
 
   return (
-    <div className="flow h-screen w-full">
+    <div ref={setNodeRef} className="flow h-screen w-full">
       <ReactFlow
         nodes={nodes}
         edges={edges}