useViewport()

GitHub上的源代码 

useViewport 钩子是一种在组件中读取当前 Viewport 状态的便捷方式。使用此钩子的组件每当视口发生变化时都会重新渲染。

🌐 The useViewport hook is a convenient way to read the current state of the Viewport in a component. Components that use this hook will re-render whenever the viewport changes.

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>
  );
}

签名

🌐 Signature

This function does not accept any parameters.

The current viewport.

注释

🌐 Notes

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