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時間で (๑>◡<๑)