Skip to main content

useOnViewportChange

This hook lets you listen to viewport changes. You can pass an object with an onStart, onChange and onEnd handlers.

caution

This hook can only be used if the component that uses it, is wrapped with a ReactFlowProvider or if it's a children of the <ReactFlow /> component.

Usage

import { useCallback } from 'react';
import ReactFlow, { useOnViewportChange } from 'reactflow';

function ViewportChangeLogger() {
useOnViewportChange({
onStart: useCallback((viewport: Viewport) => console.log('start', viewport), []),
onChange: useCallback((viewport: Viewport) => console.log('change', viewport), []),
onEnd: useCallback((viewport: Viewport) => console.log('end', viewport), []),
});

return null;
}

Typescript

useViewport({
onStart?: (viewport: Viewport) => void,
onChange?: (viewport: Viewport) => void,
onEnd?: (viewport: Viewport) => void
}): void