Using ButtonKit

ButtonKit extends Discord.js's ButtonBuilder to provide a simpler way to handle button interactions. It adds methods like onClick() to handle button clicks without manually setting up collectors.

Basic Usage

CommonJS

const { ButtonKit } = require('commandkit');
const { ButtonStyle, ActionRowBuilder } = require('discord.js');

// Create and configure a button
const button = new ButtonKit()
  .setLabel('Click me')
  .setStyle(ButtonStyle.Primary)
  .setCustomId('my-button');

// Add button to a row
const row = new ActionRowBuilder().addComponents(button);

// Send message with button
await interaction.reply({
  content: 'Here is a button!',
  components: [row],
});

// Handle clicks
button.onClick((interaction) => {
  interaction.reply('Button clicked!');
});

TypeScript

import { ButtonKit } from 'commandkit';
import { 
  type ButtonInteraction, 
  ButtonStyle, 
  ActionRowBuilder 
} from 'discord.js';

const button = new ButtonKit()
  .setLabel('Click me')
  .setStyle(ButtonStyle.Primary)
  .setCustomId('my-button');

const row = new ActionRowBuilder<ButtonKit>().addComponents(button);

await interaction.reply({
  content: 'Here is a button!',
  components: [row],
});

button.onClick((interaction: ButtonInteraction) => {
  interaction.reply('Button clicked!');
});

Important

Always set a customId when using ButtonKit. This is required to track button interactions.

Configuration Options

The onClick method accepts two parameters:

1. A handler function that receives the button interaction
2. An options object to configure the collector

Handler Function

(interaction: ButtonInteraction) => void | Promise<void>

Collector Options

interface ButtonKitOptions {
  time?: number; // Duration in ms (default: 86400000 - 24 hours)
  autoReset?: boolean; // Reset timer on click (default: false)
  once?: boolean; // Listen for single click only (default: false)
  // Plus all Discord.js InteractionCollectorOptions
}

Example with options:

button.onClick(
  (interaction) => {
    interaction.reply('Clicked!');
  },
  {
    time: 60000, // 1 minute
    autoReset: true, // Reset timer on each click
    once: false, // Handle multiple clicks
  },
);

Handling Collector End

Use onEnd() to run code when the collector stops:

button
  .onClick((interaction) => {
    interaction.reply('Clicked!');
  })
  .onEnd(() => {
    // Disable the button
    button.setDisabled(true);
    message.edit({ components: [row] });
  });

Manually Stopping the Collector

Use dispose() to manually stop the collector. This will trigger the onEnd handler if one exists.

// Stop listening for clicks
button.dispose();