Twitter の埋め込み用スクリプトを拾ってくるやつ

SPA じゃない場合はどうやってもブラウザのキャッシュ頼みになる気がする……

Twitter は @types/twitter-for-web で生えるやつ（widgets とか createTweet() にも型がつく）

code:ts

import { useEffect, useState, useMemo } from 'react'

/**

* 必要なら twitter の widgets.js をロードし、window.twttr.widgets を返す

* @example

* const widgets = useTwitterWidgets()

* useEffect(() => {

* ref.current && widgets?.createTweet('xxxxxxxxxx', ref.current, { conversation: 'none' })

export function useTwitterWidgets() {

// !!(window.twttr as Twitter)?.widgets のほうが安全……？

const isLoaded, setIsLoaded = useState('widgets' in (window.twttr || {}))

const widgets = useMemo(() => (isLoaded ? (window.twttr as Twitter).widgets : null), isLoaded)

useEffect(() => {

if (!isLoaded) {

const script = document.createElement('script')

script.async = true // いらないかも……？

script.addEventListener('load', () => window.twttr.ready(setIsLoaded(true)))

document.body.appendChild(script)

return () => void document.body.removeChild(script)

}

return widgets

}

createTweet() の呼び方に関して、useLayoutEffect() で呼んだり await したりしなくていいの？という疑問はあるけど、zenn の人の記事とか野良ライブラリの実装では useEffect() でやっており、自分の環境でもそれで問題なさそうだった

参考 URL