useViewport
useViewport フックは、コンポーネント内で Viewport の現在の状態を読み取るための便利な方法です。このフックを使用するコンポーネントは、**ビューポートが変更されるたびに**再レンダリングされます。
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 |
注記
- このフックは、
<ReactFlowProvider />または<ReactFlow />コンポーネントの子であるコンポーネントでのみ使用できます。