Custom Theme

react-xeet exports multiple utility functions to help you build your own theme if the default X theme and its customization options don't work for you or if you simply want to build your own.

To get started, we recommend using the source for the X theme (opens in a new tab) as the base and start customizing from there. Which more precisely is all of the components in the react-xeet package (opens in a new tab):

src/xeet.tsx (opens in a new tab): Exports the async Xeet component that fetches the xeet data and renders the xeet. This is a React Server Component (opens in a new tab).
src/X-theme/*.tsx (opens in a new tab): All the components that make up the theme.
src/swr.tsx (opens in a new tab): Exports the Xeet component but it uses SWR (opens in a new tab) to fetch the xeet client-side. This is useful if React Server Components are not supported by your React environment.

You can see a custom theme in action by looking at our custom-xeet-dub (opens in a new tab) example.

Publishing your theme

We recommend you follow the same patterns of the X theme before publishing your theme:

Use the props defined by the XeetProps type in your Xeet component.
Support the CSS theme features shown in Toggling theme manually. You can use the base.css (opens in a new tab) file from the X theme as reference.
Support both SWR and React Server Components as explained below.

When you use react-xeet we tell the builder which Xeet component to use with exports in package.json:

package.json

"exports": {
  ".": {
    "react-server": "./dist/index.js",
    "default": "./dist/index.client.js"
  }
},

You can learn more about react-server in the RFC for React Server Module Conventions V2 (opens in a new tab).

If the builder supports React Server Components, it will use the react-server export. Otherwise, it will use the default export.

Each export goes to a different file that exports the Xeet component. In this case index.ts exports a React Server Component and index.client.ts exports the Xeet component that uses SWR:

index.ts

export * from './X-theme/components.js'
export * from './xeet.js'
export * from './utils.js'
export * from './hooks.js'

index.client.ts

export * from './X-theme/components.js'
export * from './swr.js'
export * from './utils.js'
export * from './hooks.js'

Advanced Contributing