Skip to main content
Version: 1.x

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 configuration:

tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "commandkit"
  }
}

Available components​

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

Example usage​

example.tsx
import { Container, TextDisplay, ActionRow, Button } from 'commandkit';
import { ButtonStyle } from 'discord.js';

const message = (
  <Container>
    <TextDisplay>Welcome to our server!</TextDisplay>
    <ActionRow>
      <Button style={ButtonStyle.Primary}>Click me!</Button>
    </ActionRow>
  </Container>
);

interaction.reply({
  components: [message],
});

JSX fragments​

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

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

interaction.reply({
  components: elements,
});