API Reference

API Reference

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

getXeet

import { getXeet, type Xeet } from 'react-xeet/api'
 
function getXeet(
  id: string,
  fetchOptions?: RequestInit
): Promise<Xeet | undefined>

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

  • id - string: the xeet ID. For example in https://x.com/chibicode/status/1629307668568633344 the xeet ID is 1629307668568633344.
  • fetchOptions - RequestInit (Optional): options to pass to fetch (opens in a new tab).

If a xeet is not found it returns undefined.

enrichXeet

import { enrichXeet, type EnrichedXeet } from 'react-xeet'
 
const enrichXeet: (xeet: Xeet) => EnrichedXeet

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

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

useXeet

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

import { useXeet } from 'react-xeet'
 
const useXeet: (
  id?: string,
  apiUrl?: string,
  fetchOptions?: RequestInit
) => {
  isLoading: boolean
  data: Xeet | null | undefined
  error: any
}

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

  • id - string: the xeet ID. For example in https://x.com/chibicode/status/1629307668568633344 the xeet ID is 1629307668568633344. This parameter is not used if apiUrl is provided.
  • apiUrl - string: the API URL to fetch the xeet from. Defaults to https://react-xeet.vercel.app/api/xeet/:id.
  • fetchOptions - RequestInit (Optional): options to pass to fetch (opens in a new tab). Try to pass down a reference to the same object to avoid unnecessary re-renders.

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

const xeet = useXeet(null, id && `/api/xeet/${id}`)

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

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

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

<Xeet id={id} />
CRAX Theme