You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -8,233 +8,138 @@ import TabItem from '@theme/TabItem';
8
8
9
9
# Using ButtonKit
10
10
11
-
ButtonKit is an enhanced version of the native Discord.js [`ButtonBuilder`](https://discord.js.org/docs/packages/builders/1.9.0/ButtonBuilder:Class), designed to simplify the process of creating and handling button interactions in your Discord bot.
11
+
ButtonKit extends Discord.js's[`ButtonBuilder`](https://discord.js.org/docs/packages/builders/1.9.0/ButtonBuilder:Class) to provide a simpler way to handle button interactions. It adds methods like `onClick()` to handle button clicks without manually setting up collectors.
12
12
13
-
It is not recommended to use this to listen for button clicks forever since it creates collectors. For that purpose, it's recommended to use a regular "interactionCreate" event listener.
13
+
:::warning
14
+
ButtonKit is designed for temporary button interactions. For permanent button handlers, use Discord.js's "interactionCreate" event instead.
In the above example, you may notice how similar `ButtonKit` is to the native Discord.js `ButtonBuilder` class. That's because it's built on top of it. It introduces a new method called `onClick` which will allow you to quickly handle button interactions without having to create collectors. CommandKit does that for you!
100
-
101
-
:::warning
102
-
ButtonKit doesn't work without a custom ID, so ensure you provide one whenever
103
-
instantiating a button. This is required to keep track of what button was
104
-
clicked.
79
+
:::warning Important
80
+
Always set a `customId` when using ButtonKit. This is required to track button interactions.
105
81
:::
106
82
107
-
### Arguments Explained
83
+
##Configuration Options
108
84
109
-
Here's an empty `onClick` method without any arguments:
85
+
The `onClick` method accepts two parameters:
110
86
111
-
```js
112
-
constmyButton=newButtonKit()
113
-
.setCustomId('custom_button')
114
-
.setLabel('Click me!')
115
-
.setStyle(ButtonStyle.Primary);
116
-
117
-
myButton.onClick();
118
-
```
87
+
1. A handler function that receives the button interaction
88
+
2. An options object to configure the collector
119
89
120
-
The first argument required by this function is your handler function which will acknowledge button clicks (interactions) handled by ButtonKit. You can handle them like so:
However, the code above won't actually work since ButtonKit doesn't have any idea where it's supposed to specifically listen button clicks from. To fix that, you need to pass in a second argument, also known as your [options](/guide/buttonkit#buttonkit-onclick-options) which houses all the collector configuration. The `message` property is the message that ButtonKit will use to listen for button clicks.
When setting up an `onClick()` method using ButtonKit, you may also want to run some code after the collector ends running. The default timeout is 1 day, but you can modify this in [`onClickOptions#time`](#time-optional). To handle when the collector ends, you can setup an `onEnd()` method like this:
To dispose the button collector, you can make use of the `dispose` method. By disposing the collector like this, your `onEnd` handler (if any) will be called automatically.
223
-
224
-
```js {15}
225
-
myButton
226
-
.onClick(
227
-
(buttonInteraction) => {
228
-
buttonInteraction.reply('You clicked a button!');
229
-
},
230
-
{ message },
231
-
)
232
-
.onEnd(() => {
233
-
console.log('Button collector ended.');
138
+
## Manually Stopping the Collector
234
139
235
-
myButton.setDisabled(true);
236
-
message.edit({ components: [row] });
237
-
});
140
+
Use `dispose()` to manually stop the collector. This will trigger the `onEnd` handler if one exists.
0 commit comments