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:
---
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;