useViewport()

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

Name	Type
#Returns
#	`Viewport`

注释

¥Notes

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

¥This hook can only be used in a component that is a child of a <ReactFlowProvider /> or a <ReactFlow /> component.