Reactで文字列内のURLをリンク(<a>タグ)にする方法

TL;DR;

• 文字列内のhttp~を<a>タグでリンクにしたい
• react-string-replaceを使えば簡単にできたのでメモ＆共有
• サンプルおいておく

react-string-replace

• npm i -S react-string-replaceする(もしくはyarn add -S react-string-replace)
• react-string-replaceをimportもしくはrequireする
• 正規表現でマッチした文字列を<a>タグで囲むだけ
• 配列の文字列とかでももちろん問題なく動く

import reactStringReplace from "react-string-replace"して、
reactStringReplace(text, regExp, callback);とするだけ

以下サンプル

ListView.js

import React from "react";
import reactStringReplace from "react-string-replace";

const ItemList = ["https://www.google.com", "www.gentoo.org", "link to http://www.yahoo.com", "http://www.google.com"];
const regExp = /(https?:\/\/\S+)/g;

export default class ListView extends React.Component {
  render() {
    return (
      <div>
        <ul>
        {ItemList.map((item) => {
          return (
            <li>
              {reactStringReplace(item, regExp, (match, i) => (
                <a href={match}>{match}</a>
              ))}
            </li>
          )
        })}
        </ul>
      </div>
    )
  }
}

render関数が構築するDOMは以下のようになります。
ちゃんとマッチさせたい部分がリンクになっています。

<div>
  <ul>
    <li>
      <a href="https://www.google.com">https://www.google.com</a>
    </li>
    <li>
      www.gentoo.org
    </li>
    <li>
      link to <a href="http://www.yahoo.com">http://www.yahoo.com</a>
    </li>
    <li>
      <a href="http://www.google.com">http://www.google.com</a>
    </li>
  </ul>
</div>

以上になります。
もっといい方法とかあればご教授ください！