DefaultEdgeOptions

Source on GitHub

Many properties on an Edge are optional. When a new edge is created, the properties that are not provided will be filled in with the default values passed to the defaultEdgeOptions prop of the <ReactFlow /> component.


export type DefaultEdgeOptions<T> = {
  type?: string;
  animated?: boolean;
  hidden?: boolean;
  deletable?: boolean;
  selectable?: boolean;
  data?: T;
  selected?: boolean;
  markerStart?: string | EdgeMarker;
  markerEnd?: string | EdgeMarker;
  zIndex?: number;
  ariaLabel?: string;
  interactionWidth?: number;
  focusable?: boolean;
};

Fields

Name	Type	Default
`type`	`string \| undefined` Type of edge defined in `edgeTypes`.
`animated`	`boolean`
`hidden`	`boolean`
`deletable`	`boolean`
`selectable`	`boolean`
`data`	`Record<string, unknown>` Arbitrary data passed to an edge.
`markerStart`	`EdgeMarkerType` Set the marker on the beginning of an edge.
`markerEnd`	`EdgeMarkerType` Set the marker on the end of an edge.
`zIndex`	`number`
`ariaLabel`	`string`
`interactionWidth`	`number` ReactFlow renders an invisible path around each edge to make them easier to click or tap on. This property sets the width of that invisible path.
`label`	`ReactNode` The label or custom element to render along the edge. This is commonly a text label or some custom controls.
`labelStyle`	`CSSProperties` Custom styles to apply to the label.
`labelShowBg`	`boolean`
`labelBgStyle`	`CSSProperties`
`labelBgPadding`	`[number, number]`
`labelBgBorderRadius`	`number`
`style`	`CSSProperties`
`className`	`string`
`reconnectable`	`boolean \| HandleType` Determines whether the edge can be updated by dragging the source or target to a new node. This property will override the default set by the `edgesReconnectable` prop on the `<ReactFlow />` component.
`focusable`	`boolean`