Twitter の Widget (widgets.js) を React でかんたんに使うためのやつ(React 以外の依存なし)

useTwitter.tsx

import { useEffect, useState } from "react"

/*

index.html などに以下の script をコピペ。

see) https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/guides/set-up-twitter-for-websites

```
    <script>window.twttr = (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
      if (d.getElementById(id)) return t;
      js = d.createElement(s);
      js.id = id;
      js.src = "https://platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js, fjs);

      t._e = [];
      t.ready = function(f) {
        t._e.push(f);
      };

      return t;
    }(document, "script", "twitter-wjs"));</script>
```


型情報は `npm i -D @types/twitter-for-web` で入れられます。

see) https://www.npmjs.com/package/@types/twitter-for-web

*/

/// TwitterLike はテスト環境などでは読み込めないので undefined も可
const useTwitter = (twitterLike: TwitterLike | undefined) => {
  const [t, setT] = useState<Twitter | null>(null)

  useEffect(() => {
    if (twitterLike) {
      twitterLike.ready(setT)
    }
  }, [twitterLike])

  return t
}

export default useTwitter

使い方.tsx

// 一例
const HogeComponent = () => {
  const containerRef = useRef<HTMLDivElement>(null)
  const twitter = useTwitter(window.twttr)
  useEffect(() => {
     if(!twitter || !containerRef.current) {
         return
     }

     twitter.widgets.createFollowButton(
          "twitter screen name",
          containerRef.current
    )

    return () => {
      // 追加した widget を削除する
      document
        .querySelectorAll(".container > iframe")
        .forEach((el) => el.remove())
    }
  }, [twitter])
}