React：Cytoscape.js の図を要素に合わせてリサイズする

  import React, { useRef, useEffect } from 'react';
  import './App.css';
  import cytoscape, { Core, GridLayoutOptions } from 'cytoscape';
  import cyStyle from './cy-style.json';
  import data from './data.json';

  function App() {
    const refEl =  useRef(null);
    const refCy =  useRef<Core | null>(null);

    useEffect(() => {
      const container = refEl.current! as HTMLDivElement;
      refCy.current = cytoscape({
        container: container,
        layout: {
          name: 'grid',
          columns: 4
        } as GridLayoutOptions,
        style: cyStyle as unknown as cytoscape.Stylesheet[],
        elements: data as unknown as cytoscape.ElementsDefinition
      });
      const cy = refCy.current;

      cy.ready(function(){
        var n13 = cy.$('#n13');
        var n11 = cy.$('#n11');
        var n12 = cy.$('#n12');
        var p11 = n11.position();
        var p12 = n12.position();
        var d = (p12.x - p11.x)/4;

        n13.position({
          x: (p11.x + p12.x)/2,
          y: p11.y - d
        });

        n11.add(n12).position({ x: p11.x, y: p11.y + d });
      });
      return(() => {
        cy.destroy();
      })
    }, [])

    // リサイズ対応
    useEffect(() =>{
      const el = refEl.current! as HTMLDivElement;
      const resizeObserver = new ResizeObserver(() =>{
        const cy = refCy.current;
        cy?.resize();
        cy?.fit();
      });
      resizeObserver.observe(el);
      return () => resizeObserver.unobserve(el);
    }, [])

    return (
      <div ref={refEl} style={{ width: "100vw", height: "100vh" }} />
    );
  }

  export default App;