@antv/[email protected]

We can render component in JSX to any shape created with G API:
Online DEMO

import React, { useState, useEffect } from 'react';
import { Canvas as GCanvas, Group as GGroup } from '@antv/g';
import { Circle, render } from '@antv/react-g';

const CustomShape = () => {
  const [size, setSize] = useState(100);
  return <Circle cx={100} cy={100} r={size} stroke="#ff0000" lineWidth={2} />
};

useEffect(() => {
  // Create Canvas & Group with G API
  const canvas = new GCanvas({
    container: 'C',
    width: 500,
    height: 500,
    renderer: new Renderer(), // select a renderer
  });
  const group = new GGroup();
  canvas.appendChild(group);
  
  // Render to any shape with JSX syntax
  render(<CustomShape />, group);
});