Quartz 4

129_useonviewportchange__

1 min read

useOnViewportChange()

Source on GitHub

The useOnViewportChange hook lets you listen for changes to the viewport such as panning and zooming. You can provide a callback for each phase of a viewport change: onStart, onChange, and onEnd.

import { useCallback } from 'react';
import { useOnViewportChange } from '@xyflow/react';
 
function ViewportChangeLogger() {
  useOnViewportChange({
    onStart: (viewport: Viewport) => console.log('start', viewport),
    onChange: (viewport: Viewport) => console.log('change', viewport),
    onEnd: (viewport: Viewport) => console.log('end', viewport),
  });
 
  return null;
}

Signature

The useOnViewportChange hook lets you listen for changes to the viewport such as panning and zooming. You can provide a callback for each phase of a viewport change: onStart, onChange, and onEnd.

Parameters
  • [0].onStart?: OnViewportChange Gets called when the viewport starts changing.
  • [0].onChange?: OnViewportChange Gets called when the viewport changes.
  • [0].onEnd?: OnViewportChange Gets called when the viewport stops changing.
Returns

void

Notes

Graph View