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({ padding: 0.2, includeHiddenNodes: true })}
></button>
);
};
The useZoomPanHelper
hook returns an object containing the following functions:
fitView = ({ padding: number, includeHiddenNodes: boolean }): void
- fits the view to the nodes on the pane. padding
is 0.1
and includeHiddenNodes
is false
by defaultzoomIn = (): void
- zooms inzoomOut = (): void
- zooms outzoomTo = (zoomLevel: number): void
- zooms to passed zoom leveltransform: (transform: FlowTransform): void
- sets the transform of the panesetCenter: (x: number, y: number, zoom?: number): void
- sets the center to the passed params. If no zoom is passed the maxZoom is usedfitBounds: (bounds: Rect, padding?: number): void
- fits the pane to the passed bounds (object with width x, y, width and height: { x: 0, y: 0, width: 100, height: 100 }
)initialized: boolean
- true
when hook is initialized