useViewport

This hook returns the viewport ({ x: number, y: number, zoom: number }). The component that uses this hook re-renders whenever the viewport changes.

caution

Hooks can only be used if the component that uses it, is wrapped with a ReactFlowProvider.

Usage

import ReactFlow, { useViewport } from 'react-flow-renderer';

function ViewportLogger() {
  const { x, y, zoom } = useViewport();

  useEffect(() => {
    console.log(x, y, zoom);
  }, [x, y, zoom]);

  return null;
}

Typescript

useViewport(): Viewport