Hooks

Note

The following hooks are available from version 8.0.0 upwards. You have to use the ReactFlowProvider if you want to use these hooks.

For modifying or reading the state of the graph, you can use the following hooks:

useZoomPanHelper

This hook can only be used when your application is wrapped with a ReactFlowProvider. It can be used to modify the viewport of the react flow graph. Example:

import { useZoomPanHelper } from 'react-flow';
export default () => {
  const { fitView } = useZoomPanHelper();
  return <button onClick={() => fitView()}></button>;
};

The useZoomPanHelper hook returns an object containing the following functions:

fitView = ({ padding }): void
zoomIn = (): void
zoomOut = (): void
zoomTo = (zoomLevel: number): void
transform: (_: FlowTransform): void
initialized: boolean

Edit this page