Discord Buttons

A simple package for new discord buttons bot

Getting started

npm i @ibaraki-douji/discord-buttons --save

Usage

Create a button instance

const Buttons = require('@ibaraki-douji/discord-buttons').default
const Discord = require('discord.js')

const client = new Discord.Client();
client.buttons = new Buttons(client); // Now you can just do client.buttons to have the access

for typescript you can do that

import { Client } from 'discord.js';
import Buttons from '@ibaraki-douji/discord-buttons';
import { ClientButton } from '@ibaraki-douji/discord-buttons/types';

const client: ClientButton = new Client();
client.buttons = new Buttons(client);

Create Button

const Button = require('@ibaraki-douji/discord-buttons/structures/Button')
const button = new Button({
    type: 2,
    label: "Button text",
    custom_id: "THEID",
    style: 1
})

For more held about the button infos see here : https://discord.com/developers/docs/interactions/message-components#buttons-button-object Styles :

Create ActionRow

const ActionRow = require('@ibaraki-douji/discord-buttons/structures/ActionRow')
const row = new ActionRow({
    type: 1,
    components: [button.raw]
})

components is an Array of raw Button or raw ActionRow

Send a message with buttons

const options = {
    content: "hey",
    embed: {
        title: "oh my",
        description: "gosh"
    },
    components: [row.raw]
}
client.buttons.send(client.channels.cache.get("ID"), options);

Options is a classic message with the components field

The components array must be ActionRow at the top level. Ex: components: [button.raw] don't work but components: [row.raw] works and you can put the buttons in the ActionRow

Edit a message with buttons

const options = {
    content: "hey",
    embed: {
        title: "oh my",
        description: "gosh"
    },
    components: [row.raw]
}
client.buttons.edit(client.channels.cache.get("CHANNELID").messages.cache.get("MESSAGEID"), options);

Do an action with the button

client.buttons.addAction("custom_id", (message, member) => {
    //message = message with components
    //member = member who clicked
    
    // do anything
})

Remove action

client.buttons.removeAction("custom_id");

Exemple

I don't show the imports

const client: ClientButton = new Client();
client.buttons = new Buttons(client);

client.on("ready", async () => {
    console.log("Ready " + client.user.tag);
    const comp = new ActionRow({
        type: 1,
        components: [
            new Button({
                type: 2,
                label: "bonjour",
                custom_id: "res",
                style: 1
            }).raw
        ]
    }).raw;
    const content = {
        content: "hey",
        embed: {
            title: "oh my",
            description: "gosh"
        },
        components: [comp]
    }
    client.buttons.send(client.channels.cache.get("Channel ID") as TextChannel, content);
    
    client.buttons.addAction("res", (message, member) => {
        comp.components[0] = new Button({
            type: 2,
            label: "bonjour",
            custom_id: "res",
            style: (new Button(comp.components[0]).style == 4 ? 1 : new Button(comp.components[0]).style+1)
        }).raw
        content.components = [comp];
        client.buttons.edit(message, content);
    });

})

client.login("token");

When you start the bot a message spawn on the channel with a button named Bonjour. When you click on it, the button change style.