getTransformForBounds()

⚠️

This function is deprecated and will be removed in React Flow 12. Use getViewportForBounds instead.

This util tells you what to set the viewport to in order to fit the given bounds. You might use this to pre-calculate the viewport for a given set of nodes on the server or calculate the viewport for the given bounds without changing the viewport directly.

import { getTransformForBounds } from 'reactflow';
 
const transform = getTransformForBounds(
  {
    x: 0,
    y: 0,
    width: 100,
    height: 100,
  },
  1200,
  800,
  0.5,
  2,
);

Signature

Name	Type	Default
#Params
#`bounds`	`Rect`
#`width`	`number`
#`height`	`number`
#`minZoom`	`number`
#`maxZoom`	`number`
#`padding?`	`number`	`0.1`
#Returns
#`[0]`	`number` The x position of the transformed viewport.
#`[1]`	`number` The y position of the transformed viewport
#`[2]`	`number` The zoom level of the transformed viewport.

Notes

This is quite a low-level utility. You might want to look at the fitView or fitBounds methods for a more practical api.
This function is called getTransform… for historical reasons. Its return type represents a Viewport in tuple form.

Utils