Discord.js-jsx-components NPM

discord.js-jsx-components

Create Discord.js components in JSX, inspired by Harmony TSX.

Only for TypeScript users :D

Setup

Install discord.js master

$ npm i discordjs/discord.js

Add these in your `tsconfig.json`#compilerOptions

"jsxFactory": "DiscordComponents.createComponent",
"jsx": "react",
"jsxFragmentFactory": "fragment"

Currently, only Buttons are supported!

Example

Single Row

import {
    DiscordComponents,
    MessageActionRow,
    MessageButton,
    fragment
} from "discord.js-jsx-components"; // required

client.on("message", (message) => {
    if (message.content === "=btn") {
        const componentData = (
            <>
                <MessageActionRow>
                    <MessageButton style="PRIMARY" label="Primary" customID="primary" />
                    <MessageButton style="SECONDARY" label="Secondary" customID="secondary" />
                    <MessageButton style="DANGER" label="Danger" customID="danger" />
                    <MessageButton style="SUCCESS" label="Success" customID="success" />
                    <MessageButton style="LINK" label="Link" url="https://discord.js.org" />
                </MessageActionRow>
            </>
        );

        return message.channel.send("Buttons 🖱", { components: componentData });
    }
});

Preview

npm.io

Or Multiple

import {
    DiscordComponents,
    MessageActionRow,
    MessageButton,
    fragment
} from "discord.js-jsx-components"; // required

client.on("message", (message) => {
    if (message.content === "=btn") {
        const componentData = (
            <>
                <MessageActionRow>
                    <MessageButton style="PRIMARY" label="Primary" customID="primary" />
                    <MessageButton style="SECONDARY" label="Secondary" customID="secondary" />
                    <MessageButton style="DANGER" label="Danger" customID="danger" />
                    <MessageButton style="SUCCESS" label="Success" customID="success" />
                    <MessageButton style="LINK" label="Link" url="https://discord.js.org" />
                </MessageActionRow>
                <MessageActionRow>
                    <MessageButton style="PRIMARY" label="Primary 2" customID="primary2" />
                    <MessageButton style="SECONDARY" label="Secondary 2" customID="secondary2" />
                    <MessageButton style="DANGER" label="Danger 2" customID="danger2" />
                    <MessageButton style="SUCCESS" label="Success 2" customID="success2" />
                    <MessageButton style="LINK" label="Link 2" url="https://discord.js.org" />
                </MessageActionRow>
            </>
        );

        return message.channel.send("Buttons 🖱", { components: componentData });
    }
});