♻️ abstract to handleResizeComplete and apply event to element

lib/Resizable/index.tsx

@@ -64,9 +64,6 @@ export function Resizable(props: PropsWithChildren<ResizableProps>) {
   };
 
   const stopDrag = () => {
-    if (onResizeComplete) {
-      onResizeComplete(lastPosition);
-    }
     document.removeEventListener("mousemove", doDragRef.current, false);
     document.removeEventListener("mouseup", stopDragRef.current, false);
   };
@@ -105,6 +102,12 @@ export function Resizable(props: PropsWithChildren<ResizableProps>) {
     handle.style.top = `${yPosition - handleOffset}px`;
   };
 
+  const handleResizeComplete = () => {
+    if (onResizeComplete) {
+      onResizeComplete(lastPosition);
+    }
+  };
+
   useEffect(() => {
     doResize(rememberPosition ? lastPosition : initialWidth);
 
@@ -121,6 +124,7 @@ export function Resizable(props: PropsWithChildren<ResizableProps>) {
           className="resizable__gutter"
           onMouseDown={initDrag}
           onMouseMove={setGutterHandlePosition}
+          onMouseUp={handleResizeComplete}
         >
           <span ref={handleRef} className="resizable__gutter-handle" />
         </span>

stories/components/Resizable.stories.tsx

@@ -137,6 +137,7 @@ export function Resizable() {
         </div>
       </StoryItem>
 
+      {/* eslint-disable-next-line no-use-before-define */}
       <OnResizeStory />
     </>
   );
@@ -146,13 +147,13 @@ function OnResizeStory() {
   const [resizedTo, setResizedTo] = useState(0);
   return (
     <StoryItem
-      title="OnResize event"
-      description="If you resize me, I'll tell you what px value i was resized too"
+      title="OnResizeComplete event"
+      description="Once you're finished resizing me, I'll tell you what px value i was resized too"
     >
       <div style={{ width: "100%" }}>
         <ResizableComponent
           initialWidth={300}
-          onResize={setResizedTo}
+          onResizeComplete={setResizedTo}
           useGutterOffset
         >
           <div style={{ border: "1px solid green" }}>