JSX Plugin

discordjs-nextgen-jsx is the official plugin for JSX-based components, modals, selects and richer message flows on top of discordjs-nextgen.

Installation

1npm i discordjs-nextgen-jsx

Quick Usage

1import { App, Intents } from 'discordjs-nextgen';
2import { JSXPlugin } from 'discordjs-nextgen-jsx';
3
4const app = new App({ intents: Intents.ALL });
5
6app.use(new JSXPlugin());

JavaScript Config

1{
2  "compilerOptions": {
3    "jsx": "react-jsx",
4    "jsxImportSource": "discordjs-nextgen-jsx"
5  },
6  "include": ["**/*"]
7}

TypeScript Config

1{
2  "compilerOptions": {
3    "jsx": "react-jsx",
4    "jsxImportSource": "discordjs-nextgen-jsx"
5  },
6  "include": ["**/*"]
7}

Prefix Command Example

1import { Container, TextDisplay } from 'discordjs-nextgen-jsx';
2
3const hello = {
4  name: 'hello',
5  description: 'JSX example command',
6  run: async (ctx) => {
7    const card = (
8      <Container accentColor={0x5865f2}>
9        <TextDisplay content="Hello from JSX." />
10        <TextDisplay content={`Author: ${ctx.user.username}`} />
11      </Container>
12    );
13
14    await ctx.reply({
15      components: [card],
16    });
17  },
18};
19
20export default hello;

Embed Example

Embeds can also be written with JSX. Author, title, description, footer, fields, images, timestamps and random colors are supported.

1import {
2  Author,
3  Color,
4  Description,
5  Embed,
6  FieldText,
7  Fields,
8  Footer,
9  Image,
10  Thumbnail,
11  Timestamp,
12  Title,
13} from 'discordjs-nextgen-jsx';
14
15await ctx.reply({
16  embeds: [
17    <Embed>
18      <Color random />
19      <Author iconUrl="https://example.com/avatar.png">Nextgen Bot</Author>
20      <Title>Welcome</Title>
21      <Description>Embeds can now be written with JSX components.</Description>
22
23      <Fields>
24        <FieldText value="Online" inline>Status</FieldText>
25        <FieldText value="v1.0.0" inline>Version</FieldText>
26        <FieldText value="JSX-powered embed fields">Details</FieldText>
27      </Fields>
28
29      <Thumbnail url="https://example.com/thumb.png" />
30      <Image url="https://example.com/banner.png" />
31      <Timestamp />
32      <Footer>discordjs-nextgen-jsx</Footer>
33    </Embed>,
34  ],
35});

1await ctx.reply({
2  embeds: [
3    <Embed>
4      <Color value={0x5865f2} />
5      <Author>Burak</Author>
6      <Title>Merhaba</Title>
7      <Description>Kisa bir embed ornegi.</Description>
8      <Timestamp value={new Date()} />
9    </Embed>,
10  ],
11});

Button Example

1import { ActionRow, Button } from 'discordjs-nextgen-jsx';
2
3const row = (
4  <ActionRow>
5    <Button customId="primary">Click me</Button>
6  </ActionRow>
7);
8
9await ctx.reply({
10  content: 'A button was sent.',
11  components: [row],
12});

Modal Example

1import {
2  Modal,
3  ShortInput,
4  ParagraphInput,
5} from 'discordjs-nextgen-jsx';
6
7const modal = (
8  <Modal title="Create Profile" customId="profile-modal">
9    <ShortInput customId="name" label="Name" required />
10    <ParagraphInput customId="bio" label="Description" />
11  </Modal>
12);
13
14await ctx.showModal(modal);