API Reference

`Tweet`

import { Tweet } from 'react-tweet'

<Tweet id="1629307668568633344">

Fetches and renders the tweet. It accepts the following props:

id - string: the tweet ID. For example in https://twitter.com/chibicode/status/1629307668568633344 the tweet ID is 1629307668568633344. This is the only required prop.
apiUrl - string: the API URL to fetch the tweet from when using the tweet client-side with SWR. Defaults to https://react-tweet.vercel.app/api/tweet/:id.
fallback - ReactNode: The fallback component to render while the tweet is loading. Defaults to TweetSkeleton.
onError - (error?: any) => any: The returned error will be sent to the TweetNotFound component.
components - TwitterComponents: Components to replace the default tweet components. See the custom tweet components section for more details.
fetchOptions - RequestInit: options to pass to fetch (opens in a new tab).

If the environment where Tweet is used does not support React Server Components then it will work with SWR (opens in a new tab) instead and the tweet will be fetched from https://react-tweet.vercel.app/api/tweet/:id, which is CORS friendly.

We highly recommend adding your own API route to fetch the tweet in production (as we cannot guarantee our IP will not get limited). You can do it by using the apiUrl prop:

<Tweet apiUrl={id && `/api/tweet/${id}`} />

Note: apiUrl does nothing if the Tweet is rendered in a server component because it can fetch directly from Twitter's CDN.

Here's a good example of how to setup your own API route:

api/tweet/[tweet].ts

import type { VercelRequest, VercelResponse } from '@vercel/node'
import { getTweet } from 'react-tweet/api'
 
const handler = async (req: VercelRequest, res: VercelResponse) => {
  const tweetId = req.query.tweet
 
  if (req.method !== 'GET' || typeof tweetId !== 'string') {
    res.status(400).json({ error: 'Bad Request.' })
    return
  }
 
  try {
    const tweet = await getTweet(tweetId)
    res.status(tweet ? 200 : 404).json({ data: tweet ?? null })
  } catch (error) {
    console.error(error)
    res.status(400).json({ error: error.message ?? 'Bad request.' })
  }
}
 
export default handler

Something similar can be done with Next.js API Routes or Route Handlers.

`EmbeddedTweet`

import { EmbeddedTweet } from 'react-tweet'

Renders a tweet. It accepts the following props:

tweet - Tweet: the tweet data, as returned by getTweet. Required.
components - TwitterComponents: Components to replace the default tweet components. See the custom tweet components section for more details.

`TweetSkeleton`

import { TweetSkeleton } from 'react-tweet'

A tweet skeleton useful for loading states.

`TweetNotFound`

import { TweetNotFound } from 'react-tweet'

A tweet not found component. It accepts the following props:

error - any: the error that was thrown when fetching the tweet. Not required.

Custom tweet components

Default components used by Tweet and EmbeddedTweet can be replaced by passing a components prop. It extends the TwitterComponents type exported from react-tweet:

type TwitterComponents = {
  TweetNotFound?: (props: Props) => JSX.Element
  AvatarImg?: (props: AvatarImgProps) => JSX.Element
  MediaImg?: (props: MediaImgProps) => JSX.Element
}

For example, to replace the default img tag used for the avatar and media with next/image you can do the following:

// tweet-components.tsx
import Image from 'next/image'
import type { TwitterComponents } from 'react-tweet'
 
export const components: TwitterComponents = {
  AvatarImg: (props) => <Image {...props} />,
  MediaImg: (props) => <Image {...props} fill unoptimized />,
}

And then pass the components to Tweet or EmbeddedTweet:

import { components } from './tweet-components'
 
const MyTweet = ({ id }: { id: string }) => (
  <Tweet id={id} components={components} />
)

Twitter Theme Advanced