Here is a tweet embedded via “react-twitter-widgets”

Install “react-twitter-widgets” and configure options using Twitter documentation

My user prop is sarah11918

My user prop is jbrains

Code for this page:

//src/pages/experiments/recent-tweet.astro
  ---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { Markdown } from 'astro/components';
import RecentTweet from '../../components/RecentTweet.jsx';
---
<BaseLayout title="Recent Tweet">
  <main>
    <Markdown>
    ## Here is a tweet embedded via "react-twitter-widgets"
    </Markdown>
    <RecentTweet user="sarah11918" client:load />
    <RecentTweet user="jbrains" client:load />
  </main>
</BaseLayout>

Code for the Twitter component RecentTweet:

import React from "react";
import { Timeline } from "react-twitter-widgets";

const RecentTweet = ({user}) => (
  <>
    <div className="tweet">
      <Timeline
        dataSource={{
          sourceType: "profile",
          screenName: user,
        }}
        options={{
          width: "100",
          tweetLimit: "1",
          dnt: "true"
        }}
      />
    </div>
  </>
);

export default RecentTweet;