Create auto-wrapping text in SVG

WrappedText.tsx

import React from 'react';
import { isArray } from 'lodash';

export function wrapText(s: string|undefined, maxLength: number): string[] {
  if(s === undefined) {
    return [];
  } else if(s.length < maxLength) {
    return [s];
  } else {
    const lastSpaceIndex = s.lastIndexOf(' ', maxLength);
    if(lastSpaceIndex === -1) {
      return [
        s.substring(0, maxLength),
        ...wrapText(s.substring(maxLength), maxLength)
      ];
    } else {
      return [
        s.substring(0, lastSpaceIndex),
        ...wrapText(s.substring(lastSpaceIndex+1), maxLength)
      ];
    }
  }
}

export interface WrappedTextProps extends React.SVGProps<SVGTextElement> {
  children: string|string[];
  maxLength?: number;
}

export function WrappedText({ children, maxLength, ...rest }: WrappedTextProps) {
  if(isArray(children)) {
    if(children.length === 0) {
      return <></>;
    } else {
      return (
        <text {...rest}>
          {children.map((s, i) => <tspan key={i} x="0" dy="1.2em">{s}</tspan>)}
        </text>
      );
    }
  } else {
    return (
      <text {...rest}>
        {wrapText(children, maxLength || 80).map((s, i) => <tspan key={i} x="0" dy="1.2em">{s}</tspan>)}
      </text>
    );
  }
}