React - text with links

TextWithLinks.js

import React, { memo } from 'react';
import * as linkifyjs from 'linkifyjs';

function splitTextAndLinks(value = '') {
  const links = linkifyjs.find(value);
  const values = [];
  let index = 0;
  for (const { value: link, href } of links) {
    const urlBeginIndex = value.indexOf(link, index);
    const text = value.substring(index, urlBeginIndex);
    values.push({ text });
    values.push({ text: link, href });
    index = urlBeginIndex + link.length;
  }
  if (index < value.length) {
    values.push({ text: value.substring(index) });
  }
  return values;
}

function TextWithLinks({ value }) {
  const values = splitTextAndLinks(value);
  return (
    <div>
      {values.map(({ text, href }, key) => {
        return href
          ? <a key={key} href={href}>{text}</a>
          : <span key={key}>{text}</span>;
      })}
    </div>
  );
}

export default memo(TextWithLinks);

Add linkifyjs to package.json:

npm install --no-optional linkifyjs