useViewport

Source on GitHub (opens in a new tab)

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

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

useUpdateNodeInternals()Types