💡 This is the legacy site for v11. If you are looking for the latest docs, please visit React Flow
Reference
useViewport()

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 'reactflow';
 
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

#Returns

Notes