discordjs-nextgen-jsx

Native JSX runtime and plugin support for discordjs-nextgen.

Turkish Documentation

Installation

import { App } from 'discordjs-nextgen';
import { JSXPlugin } from 'discordjs-nextgen-jsx';

const app = new App();
app.use(new JSXPlugin());

TypeScript Setup

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "discordjs-nextgen-jsx"
  }
}

Embed Example

import {
  Author,
  Color,
  Description,
  Embed,
  FieldText,
  Fields,
  Footer,
  Image,
  Thumbnail,
  Timestamp,
  Title,
} from 'discordjs-nextgen-jsx';

await message.reply({
  embeds: [
    <Embed>
      <Color random />
      <Author iconUrl="https://example.com/avatar.png">Nextgen Bot</Author>
      <Title>Welcome</Title>
      <Description>Embeds can now be written with JSX components.</Description>

      <Fields>
        <FieldText value="Online" inline>Status</FieldText>
        <FieldText value="v1.0.0" inline>Version</FieldText>
        <FieldText value="JSX-powered embed fields">Details</FieldText>
      </Fields>

      <Thumbnail url="https://example.com/thumb.png" />
      <Image url="https://example.com/banner.png" />
      <Timestamp />
      <Footer>discordjs-nextgen-jsx</Footer>
    </Embed>,
  ],
});

Supported Embed Components

• Embed
• Author
• Title
• Description
• Footer
• Fields
• Field
• FieldText
• Image
• Thumbnail
• Timestamp
• Color

Notes

• <Timestamp /> works like .setTimestamp() and uses the current time.
• <Timestamp value={new Date()} /> also accepts Date, string, and number.
• <Color random /> generates a random embed color.
• <Color value={0x5865f2} /> uses an explicit color value.
• <Color>#5865f2</Color> and <Color>0x5865f2</Color> are also supported.