useOnViewportChange
useOnViewportChangeフックを使用すると、パンやズームなどのビューポートの変更を監視できます。onStart、onChange、onEndの各ビューポート変更フェーズにコールバックを指定できます。
import { useCallback } from 'react';
import { useOnViewportChange } from '@xyflow/react';
function ViewportChangeLogger() {
useOnViewportChange({
onStart: (viewport: Viewport) => console.log('start', viewport),
onChange: (viewport: Viewport) => console.log('change', viewport),
onEnd: (viewport: Viewport) => console.log('end', viewport),
});
return null;
}シグネチャ
| 名前 | 型 |
|---|---|
#パラメータ | |
# options | オブジェクト |
# options.onStart | (viewport: Viewport) => void |
# options.onChange | (viewport: Viewport) => void |
# options.onEnd | (viewport: Viewport) => void |
#戻り値 | |
void |
備考
- このフックは、
<ReactFlowProvider />または<ReactFlow />コンポーネントの子であるコンポーネントでのみ使用できます。