Introducing React Tweet

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

• Demo URL: https://without-react-tweet-iframes.vercel.app/

• 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.