Introduction

Tweets are dead. Long live tweets.

react-xeet allows you to embed xeets in your React application when using Next.js, Create React App, Vite, and more. This library does not require using the X API. Xeets can be rendered statically, preventing the need to include an iframe and additional client-side JavaScript.

You can see how it is action in react-xeet-next.vercel.app/light/1629307668568633344 (opens in a new tab), or scroll below. Replace the xeet ID in the URL to see other xeets.

This library is fully compatible with React Server Components. Learn more (opens in a new tab).

It's also a parody and should not be used too seriously.

Why?

Installation

Install react-xeet using your package manager of choice:

pnpm add react-xeet

yarn add react-xeet

npm install react-xeet

Now follow the usage instructions for your framework or builder:

Choosing a theme

The prefers-color-scheme (opens in a new tab) CSS media feature is used to select the theme of the xeet.

Toggling theme manually

The closest data-theme attribute on a parent element can determine the theme of the xeet. You can set it to light or dark, like so:

<div data-theme="dark">
  <Xeet id="1629307668568633344" />
</div>

Alternatively, a parent with the class light or dark will also work:

<div className="dark">
  <Xeet id="1629307668568633344" />
</div>

Updating the theme

In CSS Modules, you can use the :global selector to update the CSS variables used by themes:

.my-class :global(.react-xeet-theme) {
  --xeet-body-font-size: 1rem;
}

For Global CSS the usage of :global is not necessary.

Next.js