Skip to main content

<NodeResizer />

The node resizer component can be used to add a resize functionality to your nodes. It renders draggable controls around the node to resize in all directions.

info

Since reactflow@11.7.0 the NodeResizer component is part of the reactflow package. If you are using a version < 11.7.0, you need to install it separately.

Getting Started​

The reactflow package exports two node resizer related components: NodeResizer and NodeResizeControl.

import { NodeResizer, NodeResizeControl } from 'reactflow';

Usage Example​

The NodeResizer gets used in custom nodes. Beware that we are not passing width or height to a custom node. If you want to re-render your custom node on resize, you can access the node dimensions with the useStore function.

<NodeResizer /> Component​

The NodeResizer component is a helper component that can be used inside a custom node to add resizing controls.

Prop Types​

nodeId?​

Description:
The id of the node that will be resizable, you only need to set this if you are using the resizer outside of a custom node
Type:
string
Default:
the id of the custom node where the <NodeResizer> is rendered

color?​

Description:
The color of the resize controls
Type:
string

isVisible?​

Description:
This flag can be used to toggle the visibility of the resizer, useful if you want to display the controls only if a node is selected
Type:
boolean
Default:
true

keepAspectRatio?​

Description:
This flag can be used to keep the dimensions of the node while resizing
Type:
boolean
Default:
false

minWidth?​

Description:
The minimal width of the node to which it can be resized
Type:
number
Default:
10

maxWidth?​

Description:
The maximum width of the node to which it can be resized
Type:
number
Default:
Number.MAX_SAFE_INTEGER

minHeight?​

Description:
The minimal height of the node to which it can be resized
Type:
number
Default:
10

maxHeight?​

Description:
The maximum height of the node to which it can be resized
Type:
number
Default:
Number.MAX_SAFE_INTEGER

handleStyle?​

Description:
Styles that will be attached to the resize handle component
Type:
CSSProperties

handleClassName?​

Description:
Additional class name for the resize handle
Type:
string

lineStyle?​

Description:
Styles that will be attached to the resize lines
Type:
CSSProperties

lineClassName?​

Description:
Additional class name for the resize lines
Type:
string

shouldResize?​

Description:
This function is called before resizing and prevents the resize event if the function returns false
Type:
(event: ResizeDragEvent, params: ResizeParamsWithDirection) => boolean

onResizeStart?​

Description:
Called on resize start
Type:
(event: ResizeDragEvent, params: ResizeParams) => void

onResize?​

Description:
Called on resize
Type:
(event: ResizeDragEvent, params: ResizeParamsWithDirection) => void

onResizeEnd?​

Description:
Called on resize end
Type:
(event: ResizeDragEvent, params: ResizeParams) => void

<NodeResizeControl /> Component​

To create your own resizing UI, you can use the NodeResizeControl component where you can pass children (such as icons).

Prop Types​

nodeId​

Description:
The id of the node that will be resizable, you only need to set this if you are using the resizer outside of a custom node
Type:
string
Default:
the id of the custom node where the <NodeResizer> is rendered

position?​

Description:
The position where the control should be placed
Type:
'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
Default:
'bottom-right'

variant?​

Description:
The type of the control. Handles are used for the corners of a node, the lines are used for the sides of a node.
Type:
'handle' | 'line'
Default:
'handle'

keepAspectRatio?​

Description:
This flag can be used to keep the dimensions of the node while resizing
Type:
boolean
Default:
false

minWidth?​

Description:
The minimal width of the node to which it can be resized
Type:
number
Default:
10

maxWidth?​

Description:
The maximum width of the node to which it can be resized
Type:
number
Default:
Number.MAX_SAFE_INTEGER

minHeight?​

Description:
The minimal height of the node to which it can be resized
Type:
number
Default:
10

maxHeight?​

Description:
The maximum height of the node to which it can be resized
Type:
number
Default:
Number.MAX_SAFE_INTEGER

color?​

Description:
The color of the resize control
Type:
string

style?​

Description:
Styles that will be attached to the control component
Type:
CSSProperties

className?​

Description:
Additional class name for the control component
Type:
string

children?​

Description:
React children that will be rendered inside the control. Can be a custom icon for example.
Type:
ReactNode
Default:
null

shouldResize?​

Description:
This function is called before resizing and prevents the resize event if the function returns false
Type:
(event: ResizeDragEvent, params: ResizeParamsWithDirection) => boolean

onResizeStart?​

Description:
Called on resize start
Type:
(event: ResizeDragEvent, params: ResizeParams) => void

onResize?​

Description:
Called on resize
Type:
(event: ResizeDragEvent, params: ResizeParamsWithDirection) => void

onResizeEnd?​

Description:
Called on resize end
Type:
(event: ResizeDragEvent, params: ResizeParams) => void

Typescript​

The node-resizer package exports the prop type definitions for the components:

  • NodeResizerProps
  • ResizeControlProps