react_hexagon.js

const Hex = (props) => {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const a = (2 * Math.PI) / 6;
    const r = 40;

    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");

    const x = 40;
    const y = 40;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = "rgba(255, 0, 0, 1)";
    ctx.beginPath();
    for (var i = 0; i < 6; i++) {
      ctx.lineTo(x + r * Math.cos(a * i), y + r * Math.sin(a * i));
    }
    ctx.closePath();
    ctx.stroke();
  }, []);

  const style = {
    position: "absolute",
    left: props.x,
    top: props.y
  };

  return <canvas ref={canvasRef} style={style} {...props} />;
};