Using JSX

CommandKit provides first-class JSX support for both TypeScript and JavaScript projects. This allows you to write Discord message components using a familiar and intuitive syntax if you're already familiar with React.

Setup

CommandKit automatically configures JSX support in your project. If you are doing a manual setup, ensure you have the following in your tsconfig.json or jsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "commandkit"
  }
}

Available components

CommandKit provides JSX versions for the following Discord.js builders:

• ActionRow
• Button
• SelectMenu
• Modal
• TextDisplay
• Container
• MediaGallery
• Separator
• File

Example usage

import { Button, ActionRow } from 'commandkit';

const message = (
  <Container>
    <TextDisplay>Welcome to our server!</TextDisplay>
    <ActionRow>
      <Button style="primary">Click me!</Button>
    </ActionRow>
  </Container>
);

JSX fragments

CommandKit fully supports JSX fragments for grouping multiple elements without adding extra nodes:

const elements = (
  <>
    <TextDisplay>First message</TextDisplay>
    <TextDisplay>Second message</TextDisplay>
  </>
);