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

The NodeResizer component is not part of the reactflow package. You need to install it seperately and you need reactflow >= v11.3.3 for this to work.

Installation

npm install @reactflow/node-resizer

Getting Started

The node-resizer package exports two components: NodeResizer and NodeResizeControl. You need to import the default styles, too.

import { NodeResizer, NodeResizeControl } from '@reactflow/node-resizer';
import '@reactflow/node-resizer/dist/style.css';

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
Default:
undefined

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

minWidth

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

minHeight

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

handleStyle

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

handleClassName

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

lineStyle

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

lineClassName

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

onResizeStart

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

onResize

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

onResizeEnd

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

shouldResize

Description:
Called on resize. When it returns false, the resize will be canceled.
Type:
(event: ResizeDragEvent, params: ResizeParamsWithDirection) => void
Default:
undefined

<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

minWidth

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

minHeight

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

color

Description:
The color of the resize control
Type:
string
Default:
undefined

style

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

className

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

children

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

onResizeStart

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

onResize

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

onResizeEnd

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

shouldResize

Description:
Called on resize. When it returns false, the resize will be canceled.
Type:
(event: ResizeDragEvent, params: ResizeParamsWithDirection) => void
Default:
undefined

Typescript

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

  • NodeResizerProps
  • ResizeControlProps