💡 This is the legacy site for v11. If you are looking for the latest docs, please visit React Flow
Reference
<NodeResizeControl />

<NodeResizeControl />

Source on GitHub (opens in a new tab)

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

Props

For TypeScript users, the props type for the <NodeResizeControl /> component is exported as ResizeControlProps.

#nodeId
string
#position?
"top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right"
"bottom-right"
#variant?
"handle" | "line"
"handle"
#keepAspectRatio?
boolean
false
#minWidth?
number
10
#maxWidth?
number
Number.MAX_SAFE_INTEGER
#minHeight?
number
10
#maxHeight?
number
Number.MAX_SAFE_INTEGER
#color?
string
#style?
#className?
string
#children?
React.ReactNode
#shouldResize?
(event: D3.DragEvent, params: ResizeParams & { direction: number[] }) => boolean
#onResizeStart?
(event: D3.DragEvent, params: ResizeParams) => void
#shouldResize?
(event: D3.DragEvent, params: ResizeParams & { direction: number[] }) => boolean
#onResizeEnd?
(event: D3.DragEvent, params: ResizeParams) => void