Helpful Links. Discord Developers, Buttons, Menus

What is this?

Makes it easier to work with the message components.

Installation

npm install discord.js-components

How to use?

To add buttons to your message, use AddComponents for message components.

- Button

import { AddComponents } from "discord.js-components";

interaction.reply({
    content: "string",
    components: AddComponents({
        type: "BUTTON",
        options: [{
            customId: "1",
            style: ButtonStyle.Success,
            label: "Button #1"
        }, {
            customId: "2"
        }],
    })
});

Note. The customId key must be specified for the button and it must be unique.

- SELECT MENU

import { AddComponents } from "discord.js-components";

interaction.reply({
    content: "string",
    components: AddComponents({
        type: "SELECT_MENU",
        options: {
            customId: "1",
            options: [
                {
                    label: "Label 1",
                    value: "Value 1"
                },
                {
                    label: "Label 2",
                    value: "Value 2"
                }
            ]
        }
    })
});

Note. The customId key must be specified for the button and it must be unique.

Documentation

AddComponents

addComponents(...components: (Menu | Button)[]): ActionRowBuilder<Builder>[];

Example

Each argument of the AddComponents function is a new row.

AddComponents({
    type: "BUTTON",
    options: [{
        customId: "1",
        style: ButtonStyle.Primary,
        label: "Button #1"
    }],
}, {
    type: "BUTTON",
    options: [{
        customId: "2",
        style: ButtonStyle.Danger,
        label: "Button #2"
    }],
});

Result