npm i react-tweet-card
yarn add react-tweet-card
Here's how to set up a tweet card with basic information:
<Container>
<TweetCard
author={{
name: 'randy',
username: 'randyfactory',
image:
'https://pbs.twimg.com/profile_images/1382083582752096262/xrx0PO8Z_400x400.jpg',
}}
tweet={`how was “philosopher” ever a job lmao like was socrates sippin wine on a balcony somewhere drunkenly slurring shit like “to find urself, think for urself” with a crowd cheering underneath him like fuck yes socrates another banger this man will not miss`}
time={new Date(2021, 2, 2, 21, 3)}
source="Twitter for iPhone"
permalink="https://twitter.com/randyfactory/status/1366841622495961091"
fitInsideContainer
/>
</Container>
You can specify that the author of the tweet you're displaying in the card is either verified or protected (private).
The verified badge will show next to the user's name for verified users, and the padlock icon for protected users.
To add these properties, add isVerified: true or isProtected: true to the author prop.
You can also use isGovernment or isBusiness alongside isVerified.
<Container>
<TweetCard
author={{
name: 'hatsune mitski (zeph)',
username: 'zephanijong',
image:
'https://pbs.twimg.com/profile_images/1605512789107286016/keR9YPE2_400x400.jpg',
isVerified: true,
}}
tweet={`if she's your girl why does she follow me on spotify`}
time={new Date(2022, 9, 10, 0, 52)}
source="Twitter for iPhone"
permalink="https://twitter.com/zephanijong/status/1579243456869781505"
fitInsideContainer
/>
</Container>
You can add images to a tweet by using the tweetImages prop. You have to pass in an array of objects that have a src property with the URL to your images.
You can also add an isVideoThumbnail property set to true, which does exactly what you would think. A maximum of 4 images is allowed within a tweet.
Note: The fitInsideContainer prop makes the card fill out its parent container, so when you're dynamically changing the content of your tweet, make sure to allocate
enough visual space for the images, and pay attention the aspect ratio of the container.
<Container>
<TweetCard
author={{
name: 'demi adejuyigbe',
username: 'electrolemon',
isVerified: true,
}}
tweet={`4 months ago i quietly left 57 dvds of 'click' at my parents' house and they've still never noticed or mentioned it`}
tweetImages={[
{ src: 'https://pbs.twimg.com/media/BaMEhYBCAAAi6m-?format=jpg' },
{ src: 'https://pbs.twimg.com/media/BaMEhYBCAAAi6m-?format=jpg' },
{
src: 'https://pbs.twimg.com/media/BaMEhYBCAAAi6m-?format=jpg',
isVideoThumbnail: true,
},
]}
time={new Date(2022, 10, 28, 22, 30)}
permalink="https://twitter.com/electrolemon/status/406173363174785024"
fitInsideContainer
/>
</Container>
You can use the engagements prop on the component to display the number of replies, retweets and likes a tweet has received.
The layout can look a bit overwhelming when both the tweet's details (time and source) and the engagements are displayed, so you can use the showDetails and showEngagement props to control the layout.
Both props are set to true by default.
Setting the emojis prop to true will make the component use emoji characters for the engagement visuals instead of the icons used by Twitter.
<Container>
<TweetCard
engagement={{
replies: 206,
retweets: 17600,
likes: 128200,
}}
emojis={false}
showDetails={false}
author={{
name: 'Ethan Hardy',
username: 'ethanhardy',
image:
'https://pbs.twimg.com/profile_images/1579548555131424775/PgoOLvU7_400x400.jpg',
}}
tweet={`You say that it's fucked that gingerbread men live in gingerbread houses, but to a gingerbread person, gingerbread is as inscrutable and fundamental as carbon. The people and homes are no more alike than humans are to diamonds. Only we, their gods and creators, can see the horror`}
time={new Date(2021, 11, 21, 14, 6)}
source="Twitter for iPhone"
permalink="https://twitter.com/ethanhardy/status/1473278732676837382"
fitInsideContainer
/>
</Container>
React Tweet Card can only be rendered on the client side as it loads its CSS directly into the DOM. To make it work with SSR, try importing the package dynamically.