画像

Twitterのフィードを読み込むのに、react-twitter-widgetsが最高だった

IT KINGDOM共同開発でTwitterのフィードをTwitter APIを使用して取得するというお題がありました。
Twitter APIの情報ってあまりネット上にないのですよね。Twitterの公式ドキュメントは鬼難しい。
サロンのつよつよエンジニアさまのコードを丸パクって実装しましたが、大変勉強になったものの、不完全燃焼感しかありません。

よくよく考え、そうだTwitter社は簡単にフィードを読み込める機能を提供してくれているではないか!ライブラリーを使って実装しよう。
方向が決まれば簡単です。react-twitter-widgetsというライブラリを見つけました。

👉 https://www.npmjs.com/package/react-twitter-widgets

次のコマンドでライブラリーをインストールして

yarn add -D react-twitter-widgets


次のように記載して必要な場所から呼び出すだけです。

//src/components/twitter/twitterFeed.tsx

import { Timeline } from "react-twitter-widgets";
      
  <Timeline
          dataSource={{ screenName: "yokoiwasaki6", sourceType: "profile" }}
          options={{
            height: "1200", //お好みの高さ
            lang: "en", //お好みの言語
            width: "400", //お好みの幅
          }}
        />


次のように表示されます。レスポンシブ対応はこれだけが頼りのCSSで仕上げます💪
自分で調べて実装できたのでハッピー✨、しかも1時間で (๑>◡<๑)
twitter feed