Skeleton React component full window canvas auto-dpi-scaling and window-scaling

index.js

import React, { useRef, useLayoutEffect, useEffect } from "react";
const d3 = {
  ...require("d3-selection"),
  ...require("d3-force"),
  ...require("d3-force-reuse")
};
import canvasDpiScaler from "canvas-dpi-scaler";
import { useWindowSize } from "@react-hook/window-size";

import styles from "./styles.scss";

let canvas;
let context;

const Stage = props => {
  const canvasEl = useRef();
  const [windowWidth, windowHeight] = useWindowSize();

  useLayoutEffect(() => {
    canvas = d3.select(canvasEl.current);
    context = canvas.node().getContext("2d");
  }, []);

  useEffect(() => {}, [props]);

  useEffect(() => {
    canvasDpiScaler(canvas.node(), context, windowWidth, windowHeight);
  }, [windowWidth, windowHeight]);

  return (
    <div className={styles.root}>
      <canvas className={styles.canvas} ref={canvasEl} />
    </div>
  );
};

export default Stage;