@dressed/react

Create messages using React, patched interaction responses require ComponentsV2 and will not accept a content field.

If you manually call the render function yourself, you can use the old components.

📦 Install

bun add react @dressed/react

🚀 Usage

// src/commands/ping.tsx
import type { CommandInteraction } from "dressed";
import { patchInteraction, ActionRow, Button } from "@dressed/react";

export default async function ping(interaction: CommandInteraction) {
  const patched = patchInteraction(interaction);
  await patched.reply(
    <>
      Pong!
      <ActionRow>
        <Button custom_id="new-pong" label="Again!" />
      </ActionRow>
    </>,
    { ephemeral: true },
  );
}

If you don't want to manually patch every interaction, you can use middleware:

import { patchInteraction } from "@dressed/react";
import type { DressedConfig } from "dressed/server";

export default {
  build: { extensions: ["tsx", "ts"] },
  hooks: {
    onBeforeCommand: (i) => [patchInteraction(i)],
    onBeforeComponent: (i, a) => [patchInteraction(i), a],
  },
} satisfies DressedConfig;

[!IMPORTANT] In order for Dressed to bundle your tsx/jsx files, a glob containing them must be added to the build config's include array
e.g. dressed build -I '**/*.{ts,tsx}'