From 39bf1d1df12544c0c92f1a83741fb66be8bcb124 Mon Sep 17 00:00:00 2001
From: Zachary Haber <zhaber2@illinois.edu>
Date: Tue, 15 Feb 2022 22:04:53 -0600
Subject: [PATCH 1/2] fix: use autoResize option instead of resizeObserver

---
 src/index.tsx | 30 +-----------------------------
 1 file changed, 1 insertion(+), 29 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index c22248b..5bbecd4 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -89,7 +89,7 @@ const defaultOptions = {
   physics: {
     stabilization: false,
   },
-  autoResize: false,
+  autoResize: true,
   edges: {
     smooth: false,
     color: '#000000',
@@ -103,25 +103,6 @@ const defaultOptions = {
   },
 };
 
-function useResizeObserver(
-  ref: React.MutableRefObject<HTMLElement | null>,
-  callback: ResizeObserverCallback
-): void {
-  useEffect(() => {
-    // Create an observer instance linked to the callback function
-    if (ref.current) {
-      const observer = new ResizeObserver(callback);
-
-      // Start observing the target node for configured mutations
-      observer.observe(ref.current);
-
-      return () => {
-        observer.disconnect();
-      };
-    }
-    return;
-  }, [callback, ref]);
-}
 function shallowClone<T>(array: T[]): T[] {
   return array.map((value) => ({ ...value }));
 }
@@ -238,15 +219,6 @@ const VisGraph = forwardRef<
     };
   }, [edges, initialOptions, nodes]);
 
-  //resize network on window resize
-  function onContainerResize() {
-    if (network) {
-      network.redraw();
-    }
-  }
-
-  useResizeObserver(container, onContainerResize);
-
   return (
     <div style={{ width: '100%', height: '100%' }} ref={container} {...props} />
   );

From 638001e8528d70d0d5bd9720329df7d8674274f0 Mon Sep 17 00:00:00 2001
From: Zachary Haber <zhaber2@illinois.edu>
Date: Tue, 15 Feb 2022 22:05:29 -0600
Subject: [PATCH 2/2] docs: Add responsive example

---
 src/stories/VisNetwork.story.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/stories/VisNetwork.story.tsx b/src/stories/VisNetwork.story.tsx
index 8cc1cfe..56e6e3a 100644
--- a/src/stories/VisNetwork.story.tsx
+++ b/src/stories/VisNetwork.story.tsx
@@ -21,6 +21,7 @@ const Template: Story<StoryProps> = (args) => {
 
 export const BasicNetwork = Template.bind({});
 BasicNetwork.args = {
+  options: { autoResize: false },
   graph: {
     nodes: [{ id: 1 }, { id: 2 }, { id: 3 }],
     edges: [
@@ -66,3 +67,23 @@ ZoomKey.args = {
   ...BasicNetwork.args,
   zoomKey: 'ctrlKey',
 };
+
+const ResizeTemplate: Story<StoryProps> = (args) => {
+  return (
+    <div
+      style={{
+        resize: 'both',
+        overflow: 'auto',
+        border: '1px solid black',
+      }}
+    >
+      <VisGraph {...args} />
+    </div>
+  );
+};
+
+export const ResizeNetwork = ResizeTemplate.bind({});
+ResizeNetwork.args = {
+  ...BasicNetwork.args,
+  options: { autoResize: true },
+};