API Reference

`Xeet`

import { Xeet } from 'react-xeet'

<Xeet id="1629307668568633344">

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

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

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

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

<Xeet apiUrl={id && `/api/xeet/${id}`} />

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

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

api/xeet/[xeet].ts

import type { VercelRequest, VercelResponse } from '@vercel/node'
import { getXeet } from 'react-xeet/api'
 
const handler = async (req: VercelRequest, res: VercelResponse) => {
  const xeetId = req.query.xeet
 
  if (req.method !== 'GET' || typeof xeetId !== 'string') {
    res.status(400).json({ error: 'Bad Request.' })
    return
  }
 
  try {
    const xeet = await getXeet(xeetId)
    res.status(xeet ? 200 : 404).json({ data: xeet ?? 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.

`EmbeddedXeet`

import { EmbeddedXeet } from 'react-xeet'

Renders a xeet. It accepts the following props:

xeet - Xeet: the xeet data, as returned by getXeet. Required.
components - XeetComponents: Components to replace the default xeet components. See the custom xeet components section for more details.

`XeetSkeleton`

import { XeetSkeleton } from 'react-xeet'

A xeet skeleton useful for loading states.

`XeetNotFound`

import { XeetNotFound } from 'react-xeet'

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

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

Custom xeet components

Default components used by Xeet and EmbeddedXeet can be replaced by passing a components prop. It extends the XeetComponents type exported from react-xeet:

type XeetComponents = {
  XeetNotFound?: (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:

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

And then pass the components to Xeet or EmbeddedXeet:

import { components } from './xeet-components'
 
const MyXeet = ({ id }: { id: string }) => (
  <Xeet id={id} components={components} />
)

X Theme Advanced