useViewport
useViewport hook 是一種方便的方式，可以在元件中讀取目前的 Viewport 狀態。使用此 hook 的元件將在**視口變更時**重新渲染。
import { useViewport } from '@xyflow/react';
export default function ViewportDisplay() {
const { x, y, zoom } = useViewport();
return (
<div>
<p>
The viewport is currently at ({x}, {y}) and zoomed to {zoom}.
</p>
</div>
);
}簽名
| 名稱 | 類型 |
|---|---|
#返回 | |
Viewport |
注意事項
- 此 hook 只能在
<ReactFlowProvider />或<ReactFlow />元件的子元件中使用。