useOnViewportChange()

useOnViewportChange 钩子让你可以监听视口的变化，例如平移和缩放。你可以为视口变化的每个阶段提供回调：onStart、onChange 和 onEnd。

🌐 The useOnViewportChange hook lets you listen for changes to the viewport such as panning and zooming. You can provide a callback for each phase of a viewport change: onStart, onChange, and 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;
}

签名

🌐 Signature

Parameters:

Name	Type	Default
`[0].onStart`	`OnViewportChange` Gets called when the viewport starts changing.
`[0].onChange`	`OnViewportChange` Gets called when the viewport changes.
`[0].onEnd`	`OnViewportChange` Gets called when the viewport stops changing.

Returns:

void

注释

🌐 Notes

此 Hook 只能在 <ReactFlowProvider /> 或 <ReactFlow /> 组件的子组件中使用。