API Reference

API Reference

This is the reference for the utility functions that react-tweet provides for building your own tweet components or simply fetching a tweet. Navigate to the docs for the Twitter theme if you want to render the existing Tweet components instead.

getTweet

import { getTweet, type Tweet } from 'react-tweet/api'
 
function getTweet(id: string): Promise<Tweet | undefined>

Fetches and returns a Tweet (opens in a new tab). It accepts the following params:

  • id - string: the tweet ID. For example in https://twitter.com/chibicode/status/1629307668568633344 the tweet ID is 1629307668568633344.

If a tweet is not found it returns undefined.

enrichTweet

import { enrichTweet, type EnrichedTweet } from 'react-tweet'
 
const enrichTweet: (tweet: Tweet) => EnrichedTweet

Enriches a Tweet (opens in a new tab) as returned by getTweet with additional data. This is useful to more easily build custom tweet components.

It returns an EnrichedTweet (opens in a new tab).

useTweet

If your app supports React Server Components, use getTweet instead.

import { useTweet } from 'react-tweet'
 
const useTweet: (
  id?: string,
  apiUrl?: string
) => {
  isLoading: boolean
  data: Tweet | null | undefined
  error: any
}

SWR hook for fetching a tweet in the browser. It accepts the following parameters:

  • id - string: the tweet ID. For example in https://twitter.com/chibicode/status/1629307668568633344 the tweet ID is 1629307668568633344. This parameter is not used if apiUrl is provided.
  • apiUrl - string: the API URL to fetch the tweet from. Defaults to https://react-tweet.vercel.app.

We highly recommend adding your own API endpoint in apiUrl for production:

const tweet = useTweet(null, id && `/api/tweet/${id}`)

It's likely you'll never use this hook directly, and apiUrl is passed as a prop to a component instead:

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

Or if the tweet component already knows about the endpoint it needs to use, you can use id instead:

<Tweet id={id} />
ViteTwitter Theme