@joint/react
    Preparing search index...

    Variable SVGTextConst

    SVGText: (
        props: SVGTextProps & { ref?: Ref<SVGTextElement | null> },
    ) => ReactNode = ...

    Renders an SVG <text> element with JointJS-quality text layout: word wrapping, custom line breaks, vertical alignment, line height, text-on-path, and rich annotations. Use it inside <Paper renderElement={...}> to label or caption an element; its children must be a single string.

    The text is laid out with the JointJS Vectorizer (V(...).text()), and textWrap runs util.breakText so long strings wrap to the element's width. See SVGTextProps for every supported option.

    Type Declaration

      • (props: SVGTextProps & { ref?: Ref<SVGTextElement | null> }): ReactNode

      • Parameters

        • props: SVGTextProps & { ref?: Ref<SVGTextElement | null> }

          Props for SVGText: native SVG <text> attributes plus the JointJS Vectorizer text options (end-of-line marker, vertical anchor, line height, text-on-path, annotations) and opt-in word wrapping.

          • Optionalannotations?: TextAnnotation[]
          • OptionaldisplayEmpty?: boolean
          • Optionaleol?: string
          • Optional Readonlyheight?: number

            Maximum height in pixels for the textWrap pass; lines that overflow it are dropped.

          • OptionalincludeAnnotationIndices?: boolean
          • OptionallineHeight?: string | number
          • OptionaltextPath?: string | { [key: string]: any }
          • OptionaltextVerticalAnchor?: string | number
          • Optional ReadonlytextWrap?: boolean | BreakTextOptions

            Wrap the text to the available width using the JointJS util.breakText algorithm. Pass true for the defaults, or an options object to fine-tune wrapping (ellipsis, max line count, hyphenation, …).

            false
          • OptionaluseNoBreakSpace?: boolean
          • Optional Readonlywidth?: number

            Wrapping width in pixels for the textWrap pass. Falls back to the graph element's current width when omitted.

          • Optionalref?: Ref<SVGTextElement | null>

        Returns ReactNode

    Basic label

    import { Paper, SVGText } from '@joint/react';

    // Label each element with a static caption.
    <Paper renderElement={() => <SVGText x={10} y={20}>Hello World</SVGText>} />

    Wrap text to a fixed width

    import { Paper, SVGText } from '@joint/react';

    // Wrap a long caption to the element's current width.
    <Paper
      renderElement={() => (
        <SVGText x={10} y={20} width={100} textWrap>
          This is a long text that will wrap to multiple lines
        </SVGText>
      )}
    />

    Vertical anchor, line height, and line breaks

    import { Paper, SVGText } from '@joint/react';

    // A real "\n" in the string is what splits the content into two lines, so
    // pass it through an expression container (not raw JSX text, where "\n"
    // stays literal). textVerticalAnchor centers the block and lineHeight sets
    // the spacing between the lines.
    <Paper
      renderElement={() => (
        <SVGText x={10} y={20} textVerticalAnchor="middle" lineHeight={1.5}>
          {'Line 1\nLine 2'}
        </SVGText>
      )}
    />

    Settings

    Member Visibility