Add links to text in React

react-add-links.js

const pattern = /https?:\/\/[^\s]*/g;

function formatLink(url, props) {
  if (!url) {
    return '';
  }

  let host;
  let pathname;
  try {
    ({ host, pathname } = new URL(url));
  } catch (err) {
    return url;
  }

  return (
    <a
      {...props}
      href={url}
      rel="noopener noreferrer"
      target="_blank"
    >
      {host + (pathname !== '/' ? pathname : '')}
    </a>
  );
}

function addLinks(text) {
  const splitText = text.split(pattern);

  if (splitText.length <= 1) {
    return text;
  }

  const matches = text.match(pattern);

  return splitText.reduce((arr, element, index) => (matches[index] ? [
    ...arr,
    element,
    formatLink(matches[index], { key: index }),
  ] : [...arr, element]), []);
}