Turn a string into JSX with autolinks

getLinkifiedString.tsx

type LinkifiedString = Array<string | JSX.Element> | string | null | undefined

/**
 * Turn a string into JSX with autolinks
 */
export function getLinkifiedString(str: string | null | undefined): LinkifiedString {
  try {
    // Group by whitespace (wrapping regex in parens keeps matched results in the array)
    const substrings = str?.split(/(\s+)/g)

    if (!substrings?.length) {
      return null
    }

    const l = linkify()
    const jsx: LinkifiedString = []

    for (let i = 0; i < substrings.length; i++) {
      const substring = substrings[i]
      if (substring === undefined) {
        continue
      }

      const match = l.match(substring)?.[0]

      const jsxItem = match ? (
        <a
          href={match.url}
          key={i + substring}
          rel="noreferrer"
          target="_blank"
        >
          {match.text}
        </a>
      ) : (
        substring
      )

      jsx.push(jsxItem)
    }

    return jsx
  } catch (err) {
    return str
  }
}