Example of automatically detecting links (http and email) in text and turning it into react components. Note I think linkifyjs detects less accurately than linkify-it and react-linkify is slightly over engineered and looked stale at the moment.

linkify.ts

import LinkifyIt from 'linkify-it';
import tlds from 'tlds';
import React from 'react';

const linkify = new LinkifyIt();
linkify.tlds(tlds);

// based on https://github.com/tasti/react-linkify/blob/d0afedd671fd59b1d73ce5bdbadf90268824edb7/src/components/Linkify.jsx

export function parseString(
  string: string,
  componentDecorator: (match: LinkifyIt.Match, i: number) => React.ReactNode
): React.ReactNode {
  if (string === '') {
    return string;
  }

  const matches = linkify.match(string);
  if (!matches) {
    return string;
  }

  const elements: React.ReactNode[] = [];
  let lastIndex = 0;
  matches.forEach((match, i) => {
    // Push preceding text if there is any
    if (match.index > lastIndex) {
      elements.push(string.substring(lastIndex, match.index));
    }

    elements.push(componentDecorator(match, i));

    lastIndex = match.lastIndex;
  });

  // Push remaining text if there is any
  if (string.length > lastIndex) {
    elements.push(string.substring(lastIndex));
  }

  return elements.length === 1 ? elements[0] : elements;
}

LinkifyIt.tsx

import { Match } from 'linkify-it';
import React from 'react';

import { parseString } from '../vendor/linkify/linkify';

const decorateComponent = (match: Match, i: number) => (
  <a
    key={i}
    href={match.url}
    target="_blank"
    rel="noopener noreferrer"
    className="font-bold hover:underline"
    title={match.raw}
  >
    {match.text}
  </a>
);

export const LinkifyIt: React.FC<{ text: string }> = ({ text }) => {
  return <>{parseString(text, decorateComponent)}</>;
};