Skip to main content

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