2 min read
Embed tweets into your React application without sacrificing performance.
Introducing react-tweet
– embed tweets into any React application with a single line of code, without sacrificing performance.
import { Tweet } from 'react-tweet' export default function Page() { return <Tweet id="1683920951807971329" />}
The resulting tweet – statically generated, no iframes required:
Some benefits of using react-tweet
:
35x less client-side JavaScript than the Twitter's Native embed
Support for React Server Components
Built-in data fetching and caching
Works with any React framework – Next.js, Vite, and Create React App
Improving embeds with Server Components
Historically, embedding tweets has required using Twitter's embedded iframe. This loads 560kb
worth of client-side JavaScript, which slows site performance and causes layout shift.
With react-tweet
, you no longer need to use iframes. Instead, all you need is a simple React component that is compatible with Next.js, Vite, and Create React App:
import { Tweet } from 'react-tweet' export default function Page() { return <Tweet id="1683920951807971329" />}
The resulting embedded tweet has several advantages:
No layout shift or scrolling jumps (Cumulative Layout Shift)
Improved UX with instantly visible tweets in the browser (no lazy loading)
Build with the powerful React component abstraction.
To demonstrate this performance improvement, here's a comparison between the native Twitter embed, iframe embed, and react-tweet
:
Native Twitter embed
Demo URL: https://without-react-tweet.vercel.app/
Client-side JavaScript needed:
560kb
Twitter embed with iframe
Client-side JavaScript needed:
557kb
react-tweet
Demo URL: https://with-react-tweet.vercel.app/
Client-side JavaScript needed:
16kb
How react-tweet
works
Under the hood, react-tweet
reverse-engineers the Twitter's Embed API to fetch data for a given tweet and renders it in the same style as Twitter's embedded iframe.
You don't need to rely on Twitter API v2 to fetch tweets on your own, saving you money and making it easier to add tweets to your site.
Get started with react-tweet
Try out react-tweet
today by running the following command:
npm i react-tweet
Check out the documentation to learn more.