useOnViewportChange
useOnViewportChange Hook 讓您可以監聽視窗變更，例如平移和縮放。您可以為視窗變更的每個階段提供回呼函式：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 |
注意事項
- 此 Hook 只能在
<ReactFlowProvider />或<ReactFlow />元件的子元件中使用。