React TypeScript 改行が含まれれるテキストをいい感じに改行させたい

前にも同じようなことやったけど React.createElement を使った TypeScript 版を作ったのでメモ

import { ReactElement, createElement } from 'react';
const newlineRegex = /(\r\n|\r|\n)/g;

export const nl2br = (text: string): (string | ReactElement)[] => {
  return text.split(newlineRegex).map((line, index) => {
    if (line.match(newlineRegex)) {
      return createElement('br', { key: index });
    }
    return line;
  });
};

1 引数で渡された文字列 text に含まれる改行コードをキャプチャして分割

split(separator)
If separator is a regular expression that contains capturing parentheses ( ), matched results are included in the array.
cf. String.prototype.split() - JavaScript | MDN

"星宮いちご\n霧矢あおい\n紫吹蘭".split(/(\r\n|\r|\n)/g);
// => ['星宮いちご', '\n', '霧矢あおい', '\n', '紫吹蘭']

2 改行コードを createElement('br', { key: index }) で brタグに変換して返す

createElement(type, props, ...children)
props: The props argument must either be an object or null. If you pass null, it will be treated the same as an empty object. React will create an element with props matching the props you have passed. Note that ref and key from your props object are special and will not be available as element.props.ref and element.props.key on the returned element. They will be available as element.ref and element.key.
cf. createElement – React