React component for multiple lines string, with converting URL to "a" tag.

lines.tsx

import * as React from "react";
const Lines: React.FC<{ body: string }> = (props) => (
  <>
    {props.body.split("\n").map((line) => {
      const result = line.match(/(.*)(https?:\/\/[^\s]*)(.*)/);
      if (result === null) {
        return (
          <>
            {line}
            <br />
          </>
        );
      } else {
        const [_, part1, part2, part3] = result;
        return (
          <>
            {part1}
            <a href={part2}>{part2}</a>
            {part3}
            <br />
          </>
        );
      }
    })}
  </>
);
export default Lines;

trackback https://twitter.com/ka_/status/1657411476406300673