Welcome to react-graph-vis Discussions!

[crubier]

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

• Ask questions you’re wondering about.
• Share ideas.
• Engage with other community members.
• Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

[ZachHaber]

Hey, just wanted to share what I put together for a project: https://gist.github.com/ZachHaber/feb0432fe395a303a4f10671877e5e70

We ran into the issue #92 (comment) which prevented use of strict mode, so I modified the code to using a function component with TS definitions.

It's far too large of a modification to reasonably put in a PR for the change as it's a full rewrite. But I wanted to share it because it fixed the issues with hot reloading we were running into, and fixed some other issues with the graph not updating.

[ZachHaber]

@Rocamonde You should put event listeners in an effect so you can clean them up.

const networkRef = useRef<Network | undefined>(undefined);
useEffect(() => {
  const resize = () => {
    if (!networkRef.current) {
      return;
    }
    networkRef.current.setOptions({
      width: window.innerWidth.toString(),
      height: window.innerHeight.toString(),
    });
  };
  window.addEventListener("resize", resize);
  return () => {
    window.removeEventListener("resize", resize);
  };
}, []);

return <VizGraph ref={networkRef} />

That being said, one of the ways I used this was I made a parent component which uses a ResizeObserver on a wrapping div to set the size of the network.

[Rocamonde]

@ZachHaber when I used a use ref and use effect the ref was always undefined, apparently because the use effect was called before the ref was attached, and because the ref is mutated instead of replaced the hook didn’t get called again, so I switched to using use callback. Any idea why this might be or how I could fix it?

[ZachHaber]

@Rocamonde That's just how refs work. That's why I set this example up the way I did. I always attach the event listener, but then in the event listener itself, I check for nullish values before doing the actual resize. Since the ref mtuates instead of re-rendering, the ref will always be the current value in the listener.

[vtrphan]

Thanks for the rewrite, i tried and somehow i cannot use interactions with the graph anymore (drag, zoom, select nodes etc. doesn't work ). Any idea why it doesn't work? Is there an issue with the rewrite?

[ZachHaber]

@vtrphan I've done all of those things with the re-write. So, we'd probably need more info to figure that out.