Resize (width and height of viewport) not working

[danielbakas]

Describe the bug I tried hooks and SizeMe but neither worked. I'd just like to make the graph responsive to the height and width of the viewport.

To Reproduce Steps to reproduce the behavior:

1. Pass any combination of hooks and variables as width or height props to the ForceGraph3D component
2. Trying to pass dependencies to useEffect
3. More

Expected behavior For the graph to adapt to the parent container width and height.

Screenshots Here's a screenshot of the graph after resizing. It's gets cropped instead of resizing with the window.

Desktop (please complete the following information):

• OS: MacOS Ventura
• Browser Chrome
• Version 108.0.5359.124 (official Build) (arm64)

Additional context I tried reading through the issues but none seemed to fix it.

Thanks so much @vasturiano!

[Dola97]

Did you Know how to solve this problem🤔🤔🤔

[danielbakas]

Not yet 🥲

[vasturiano]

I've made a simple responsive example here, using SizeMe: https://codesandbox.io/s/responsive-force-graph-jlh2xb?file=/src/App.js

[danielbakas]

Hmm. Not sure why it didn't work. Here's the code:

import { SizeMe } from "react-sizeme";
/* {...} */
<SizeMe>
    {({ size: { width } }) =>
        <ForceGraph3D
           /* {...} */
            width={width}
        />
    }
</SizeMe>

[extreox]

this fixed it for me @react-hook/window-size https://www.npmjs.com/package/@react-hook/window-size

import { useWindowSize } from "@react-hook/window-size";

 const [width, height] = useWindowSize();   
 <ForceGraph3D
           /* {...} */
            width={width}
        />