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;