React Tweet Embeds

3.3.0 · active · verified Sun Apr 19

react-tweet is a library maintained by Vercel that enables seamless embedding of individual tweets into React applications, supporting various build tools like Next.js and Vite. It provides components for rendering tweets, including media, and utilities for fetching tweet data. The current stable version is 3.3.0. The package maintains an active release cadence, frequently pushing minor updates and bug fixes, often in response to changes in the underlying X (formerly Twitter) platform's API or styling. Key differentiators include its tight integration with the Vercel ecosystem, built-in styling for a consistent look, and a focus on providing a reliable way to display tweet content that often faces challenges due to Twitter's evolving API access and rate limits.

Common errors

```
Module not found: Can't resolve 'react-tweet'
```
cause Incorrect import path for components or API functions after v3.0.0.

fix Change `import { Tweet } from 'react-tweet';` to `import { Tweet } from 'react-tweet/components';` or `import { getTweet } from 'react-tweet/api';`.
```
Error: Children of Server Components cannot have a `key` prop. Remove the `key` prop from your `Tweet` component.
```
cause Using `key` prop directly on a `Tweet` component that is being rendered within a Server Component context.

fix If `Tweet` is a Server Component, the `key` prop should be applied to the parent element if mapping over a list, not directly to `Tweet` itself.
```
TypeError: Cannot read properties of undefined (reading 'media_details')
```
cause `rawTweet` prop passed to `Tweet` component is `undefined` or malformed, often because `getTweet` returned `undefined`.

fix Always verify that `getTweet` returns a valid tweet object before passing it to the `Tweet` component. Add checks like `if (!tweet) return null;`.
```
Tweet media buttons still show 'Twitter' logo instead of 'X'.
```
cause Outdated version of `react-tweet` or missing styles, causing older assets to be displayed.

fix Update to `react-tweet@3.1.0` or newer. Ensure styles are correctly imported, as `react-tweet/styles` provides the necessary icons.

Warnings

breaking Version 3.0.0 introduced significant breaking changes, specifically around import paths. Components like `Tweet` and `TweetSkeleton` are now imported from `react-tweet/components`, and API utilities like `getTweet` are from `react-tweet/api`.
Fix: Update import statements: `import { Tweet } from 'react-tweet/components';` and `import { getTweet } from 'react-tweet/api';`.
gotcha Styling for react-tweet is often managed by importing a CSS file. If styles are missing, tweets may appear unformatted.
Fix: Ensure you are importing the base styles, for example, by adding `import 'react-tweet/styles';` to your root layout or entry file.
breaking The `date-fns` dependency was removed in v3.2.1, and the time component was refactored to be a server component. This might affect client-side rendering of tweet timestamps if your setup relied on client-side `date-fns` formatting.
Fix: No direct fix needed, but be aware of the change in rendering context for the time component. If custom date formatting is required on the client, you'll need to implement it yourself.
gotcha When `getTweet` encounters a private or non-existent tweet, it will log to the console and return `undefined`. Your application must handle this case gracefully.
Fix: Always check if the result of `getTweet` is `undefined` before attempting to render the `Tweet` component. For example: `const tweet = await getTweet(id); if (!tweet) return <TweetNotFound />;`
breaking React 19 was added to peer dependencies in v3.2.2. While this primarily indicates compatibility, older versions of React might show peer dependency warnings.
Fix: Ensure your project uses React 18 or React 19 to satisfy peer dependency requirements and avoid potential warnings or issues.

Install

npm install react-tweet npm
yarn add react-tweet yarn
pnpm add react-tweet pnpm

Imports

Tweet
wrong:
```
import { Tweet } from 'react-tweet';
```
correct:
```
import { Tweet } from 'react-tweet/components';
```
Components are imported from the `/components` subpath, not the root, since v3.
getTweet
wrong:
```
import { getTweet } from 'react-tweet';
```
correct:
```
import { getTweet } from 'react-tweet/api';
```
API functions like `getTweet` are imported from the `/api` subpath, not the root, since v3.
TweetSkeleton
wrong:
```
const { TweetSkeleton } = require('react-tweet');
```
correct:
```
import { TweetSkeleton } from 'react-tweet/components';
```
Used for displaying a loading state. CommonJS `require` is not supported for these components.

Quickstart

Demonstrates fetching a tweet using `getTweet` and rendering it with the `Tweet` component, suitable for SSR/SSG contexts.

import { Tweet } from 'react-tweet/components';
import { getTweet } from 'react-tweet/api';

// This component is designed for server-side fetching (e.g., Next.js Server Components)
// or client-side fetching with appropriate state management.
async function MyTweetEmbed({ id }: { id: string }) {
  const tweet = await getTweet(id);

  if (!tweet) {
    return <p>Tweet not found or private.</p>;
  }

  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      width: '100%',
      margin: '20px 0'
    }}>
      <Tweet rawTweet={tweet} />
    </div>
  );
}

// Example usage in a React component:
// <MyTweetEmbed id="1713028308833912089" />
// Remember to call `getTweet` in a server component or `useEffect` for client components.

view raw JSON →