Does not work with flexbox

[ValentinKaisermayer]

Minimal example that uses flex boxes that does not work. Link

[ValentinKaisermayer]

There seems to be something wrong with the variable names. Only

ref, width, height

works.

const App = () => {
  const [open, setOpen] = useState(true);
  const { ref, width, height } = useResizeObserver();
  const { ref2, width2, height2 } = useResizeObserver();
  const { ref3, width3, height3 } = useResizeObserver();

  const renderDiv = () => {
    if (!open) {
      return null;
    }

    return (
      <div
        ref={ref2}
        style={{ flexGrow: "1", backgroundColor: "orange", padding: "1em" }}
      >
        {width2}x{height2}
      </div>
    );
  };

  return (
    <div>
      <button onClick={() => setOpen(!open)}>Toggle</button>
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          alignItems: "stretch"
        }}
      >
        <div
          ref={ref}
          style={{ flexGrow: "1", backgroundColor: "teal", padding: "1em" }}
        >
          {width}x{height}
        </div>
        {renderDiv()}
        <div
          ref={ref3}
          style={{ flexGrow: "1", backgroundColor: "violet", padding: "1em" }}
        >
          {width3}x{height3}
        </div>
      </div>
    </div>
  );
};

[ZeeCoder]

You're using object destructuring wrong, try something like:

const {ref, width: width2, height: height2} = resizeObserver()

Then it should work 👍

[ValentinKaisermayer]

Thanks!