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.

warning

ButtonKit is designed for temporary button interactions. For permanent button handlers, use Discord.js's "interactionCreate" event instead.

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
const message = await interaction.reply({
  content: 'Here is a button!',
  components: [row],
  fetchReply: true,
});

// 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);

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

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();