# @react-g/component high order component build upon @react-g/core component ## HTML, use dom element in canvas ```tsx import React, { useRef, useState } from 'react'; import { Canvas, Circle, Html } from 'react-g-canvas'; import { Button } from 'antd'; import 'antd/dist/antd.css'; import { Shape } from '@antv/g-canvas'; const App: React.FC = () => { const circleRef = useRef(); const portal = useRef(null); const [hovered, setHoverd] = useState(false); const [cursor, setCursor] = useState<{ x: number; y: number }>({ x: 0, y: 0 }); return (
{hovered && (
test
)} { setHoverd(true); setCursor({ x: event.clientX, y: event.clientY, }); }} onMousemove={event => { if (hovered) { setCursor({ x: event.clientX, y: event.clientY }); } }} onMouseleave={event => { setHoverd(false); setCursor({ x: 0, y: 0, }); }} />
); }; export default App; ``` ## Tooltip ```tsx import React, { useRef, useState } from 'react'; import { Canvas, Tooltip, Rect } from 'react-g-canvas'; const App: React.FC = () => { const [dragStart, setDragstart] = useState<{ x: number; y: number }>({ x: 0, y: 0 }); const [position, setPosition] = useState<{ x: number; y: number }>({ x: 100, y: 100 }); const portal = useRef(null); return (
tootip content
}> { setDragstart({ x: event.x, y: event.y }); }} onDrag={event => { setPosition({ x: position.x + event.x - dragStart.x, y: position.y + event.y - dragStart.y, }); setDragstart({ x: event.x, y: event.y, }); }} onDragend={() => { setDragstart({ x: 0, y: 0 }); }} />
); }; export default App; ```