diff --git a/example/src/Edges/index.tsx b/example/src/Edges/index.tsx
index 1e6b4dc2..f1e52bce 100644
--- a/example/src/Edges/index.tsx
+++ b/example/src/Edges/index.tsx
@@ -43,7 +43,14 @@ const initialElements: Elements = [
id: 'e5-6',
source: '5',
target: '6',
- label: 'styled label',
+ label: (
+ <>
+ i am using
+
+ {''}
+
+ >
+ ),
labelStyle: { fill: 'red', fontWeight: 700 },
arrowHeadType: ArrowHeadType.Arrow,
},
diff --git a/src/types/index.ts b/src/types/index.ts
index cbf38518..a7fdb413 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,4 +1,4 @@
-import { CSSProperties, MouseEvent as ReactMouseEvent, HTMLAttributes } from 'react';
+import { CSSProperties, MouseEvent as ReactMouseEvent, HTMLAttributes, ReactNode } from 'react';
import { Selection as D3Selection, ZoomBehavior } from 'd3';
export type ElementId = string;
@@ -63,7 +63,7 @@ export interface Edge {
target: ElementId;
sourceHandle?: ElementId | null;
targetHandle?: ElementId | null;
- label?: string;
+ label?: string | ReactNode;
labelStyle?: CSSProperties;
labelShowBg?: boolean;
labelBgStyle?: CSSProperties;
@@ -84,7 +84,7 @@ export enum BackgroundVariant {
export type HandleType = 'source' | 'target';
-export type NodeTypesType = { [key: string]: React.ReactNode };
+export type NodeTypesType = { [key: string]: ReactNode };
export type EdgeTypesType = NodeTypesType;
@@ -102,7 +102,7 @@ export interface WrapEdgeProps {
onClick?: (event: React.MouseEvent, edge: Edge) => void;
selected: boolean;
animated?: boolean;
- label?: string;
+ label?: string | ReactNode;
labelStyle?: CSSProperties;
labelShowBg?: boolean;
labelBgStyle?: CSSProperties;
@@ -144,7 +144,7 @@ export interface EdgeProps {
animated?: boolean;
sourcePosition: Position;
targetPosition: Position;
- label?: string;
+ label?: string | ReactNode;
labelStyle?: CSSProperties;
labelShowBg?: boolean;
labelBgStyle?: CSSProperties;
@@ -164,7 +164,7 @@ export interface EdgeSmoothStepProps extends EdgeProps {
export interface EdgeTextProps extends HTMLAttributes {
x: number;
y: number;
- label?: string;
+ label?: string | ReactNode;
labelStyle?: CSSProperties;
labelShowBg?: boolean;
labelBgStyle?: CSSProperties;