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 | object |
# options.onStart | (viewport: Viewport) => void |
# options.onChange | (viewport: Viewport) => void |
# options.onEnd | (viewport: Viewport) => void |
#返回值 | |
void |
备注
- 此钩子只能在作为
<ReactFlowProvider />或<ReactFlow />组件子组件的组件中使用。