README
Eris Components
NOTE: We are not maintaining this package anymore, if someone is willing to maintain it feel free to open an issue
Summary
Eris Components allows you to use Discord buttons and other components interacting with the Discord API.
Module developed by
tnfAngel
#6557 &Jakemate977
#5825.
Usage
const ErisComponents = require('eris-components');
const client = ErisComponents.Client(ErisClient);
Example
const ErisComponents = require('eris-components');
const Eris = require('eris');
const bot = new Eris('Bot XXXX.XXXXXX.XXXX'); // ErisClient instance.
const options = {
debug: false, // Debug disabled.
invalidClientInstanceError: true, // Only set this option to false if client instance error is bugged.
ignoreRequestErrors: false // If Eris Components should ignore errors on request (4xx or 5xx) codes.
};
const client = ErisComponents.Client(bot, options); // The ErisClient with ErisComponents methods.
// Send button example:
const Button = new ErisComponents.Button()
.setLabel('Click me!')
.setID('Component ID')
.setStyle('blurple');
await client.sendComponents('Channel ID', Button, 'Hi! this is your first button.'); // Send a message with a button to a Discord channel.
Documentation
Eris Components Classes
- Client |
.Client(ErisClient, options)
-> ErisComponentsClient
Adds Eris Components Methods to the ErisClient provided. Returns the client instance with the new methods.
const options = {
debug: false, // Disable / Enable debug.
invalidClientInstanceError: true, // Only set this option to false if client instance error is bugged.
ignoreRequestErrors: false // If Eris Components should ignore errors on request (4xx or 5xx) codes.
};
new ErisComponents.Client(ErisClient, options);
- ActionRow |
.ActionRow()
-> ErisActionRow
Creates an row for send multiple components in a message.
new ErisComponents.ActionRow()
.addComponents([Button1, Button2, Button3]) // This method will add multiple components in the Action Row.
.addComponent(Button4) // This method will add one component in the Action Row.
.setComponents([Button5]); // This method will set an new array of components in the Action Row, put an empty array to remove all components.
- Button |
.Button()
-> ErisButton
Creates an button object for send in a message or add in an action row.
new ErisComponents.Button()
.setStyle('blurple') // Sets a color for the button. Available styles: 'blurple' | 'grey' | 'gray' | 'green' | 'red' | 'url' | 'primary' | 'secondary' | 'success' | 'danger' | 'link'
.setLabel('Text here') // Sets a label for the button.
.setDisabled(false) // Sets the disabled state of the button. (Default true if called)
.setID('Component ID') // Sets the custom_id of the button. Util to recognize different components.
.setEmoji('846514899503939605 (emoji id) or 🤗 (raw emoji)', false) // Sets the emoji of the button. The first argument is the emoji and the second argument is if the emoji is animated or not.
.setEmoji({ id: '846514899503939605', name: 'Hi'}, false); // This is valid too. But if you want to put raw emoji the id must be null and name the emoji.
.setURL('URL here'); // Sets the url of the button. Important: To use this method, you must put in style "link" or "url" and not put .setID() in the Button class.
- ComponentsCollector |
.ComponentsCollector(ErisClient, filter, channel, options?, thisArg?)
-> ErisComponentsCollector
Creates an components collector in a channel.
/**
* @param {ErisClient} ErisClient (Required) Eris Bot Client.
* @param {function} filter (Required) The filter on the colector. Should be an arrow function or an function if you want thisArg.
* @param {string} channel (Required) The ID of the channel in which the collector will work.
* @param {object} options (Optional) Object that contains the options for the collector.
* @param {number} options.time (Optional) The time in milliseconds in which the collector will stop. Put 0 to not put a limit. It is highly recommended to set a time limit.
* @param {thisArg} thisArg (Optional) The this argument passed to the filter.
* @returns collector
*/
const filter = ((body) => body.data.custom_id == 'Component ID'); // Example filter.
const channel = message.channel.id; // Channel ID.
const options = { time: 10000 }; // Time in milliseconds in which the collector will stop.
const thisArg = null; // Null because the filter is an arrow function.
const collector = new ErisComponents.ComponentsCollector(ErisClient, filter, channel, options, thisArg);
collector.on('collect', async (resBody) => { // On collect a component interaction that meets the filter. ResBody is the response body of the component interaction.
console.log('Collected.');
await client.replyInteraction(resBody, [], 'Hi'); // Example reply of a interaction.
});
collector.on('end', (collected) => { // When the collector stops. It can be by time or by call of the stop() method. Collected is an array of all collected resBody's.
console.log('Collector end. Collected:', collected);
});
console.log(collector.collected); // This will print an array of all components interactions collected.
console.log(collector.ended); // This will print true or false depending on whether the collector ended or not.
- SelectMenu |
.Menu()
-> ErisSelectMenu
Creates an new Select Menu object for send.
new ErisComponents.Menu()
.setPlaceholder('Select a option') // This will set a placeholder for the Select Menu.
.setID('your_id') // Sets the custom_id of the Select Menu. Util to recognize different components.
.setMaxValues(1) // Sets the max options values of the Select Menu.
.setMinValues(1) // Sets the min options values of the Select Menu.
.setDisabled(false) // Sets the disabled state of the Select Menu. (Default true if called)
.addOptions([option1, option2]) // This method will add multiple options in the Select Menu.
.addOption(option3) // This method will add one option in the Select Menu.
.setOptions([option4]); // This method will set an new array of components in the Select Menu, put an empty array to remove all components.
- MenuOption |
.MenuOption()
-> ErisMenuOption
Creates an new Select Menu Option for put in options of a Menu class.
new ErisComponents.MenuOption()
.setLabel('Text here') // Sets a label for the option.
.setValue('value_here') // Sets the value of the option. Util to recognize different options.
.setDescription('Description of the option') // Sets the description of the option.
.setDefault(false) // Sets the default state of the option. (Default true if called)
.setEmoji('846514899503939605 (emoji id) or 🤗 (raw emoji)', false) // Sets the emoji of the button. The first argument is the emoji and the second argument is if the emoji is animated or not.
.setEmoji({ id: '846514899503939605', name: 'Hi'}, false); // This is valid too. But if you want to put raw emoji the id must be null and name the emoji.
Eris Components Client Events
- RawInteractionCreate |
.on('rawInteractionCreate', (resBody) => resBody)
-> resBody
Event emitted when any interaction is created.
client.on('rawInteractionCreate', async (resBody) => {
console.log(resBody);
await client.replyInteraction(resBody, button, 'Hi');
});
- SlashCommandInteract |
.on('slashCommandInteract', (resBody) => resBody)
-> resBody
Event emitted when any slash command is triggered.
client.on('slashCommandInteract', async (resBody) => {
console.log(resBody);
await client.replyInteraction(resBody, button, 'Hi');
});
- ClickButton |
.on('clickButton', (resBody) => resBody)
-> resBody
Event emitted when any button sended by the client is clicked.
client.on('clickButton', async (resBody) => {
console.log(resBody);
await client.replyInteraction(resBody, button, 'Hi');
});
- SubmitMenu |
.on('submitMenu', (resBody) => resBody)
-> resBody
Event emitted when any menu sended by the client is submitted.
client.on('submitMenu', async (resBody) => {
console.log(resBody);
await client.replyInteraction(resBody, button, 'Hi');
});
- ComponentInteract |
.on('componentInteract', (resBody) => resBody)
-> resBody
Event emitted when any interaction with component is performed.
client.on('componentInteract', async (resBody) => {
console.log(resBody);
await client.replyInteraction(resBody, button, 'Hi');
});
Eris Components Client Methods
- SendComponents |
.sendComponents(channel, components, content, file)
-> DiscordAPIRequest
Sends components to a specific channel.
// Send single component.
await client.sendComponents('Channel ID', button, 'Hi');
// Send multiple Buttons.
const actionRow = new ErisComponents.ActionRow()
.addComponents([Button1, Button2, Button3]);
await client.sendComponents('Channel ID', actionRow, 'Hi');
// Or
client.sendComponents('Channel ID', [button1, button2], 'Hi');
// Send multiple rows.
const actionRow = new ErisComponents.ActionRow()
.addComponents([Button1, Button2, Button3]);
const actionRow2 = new ErisComponents.ActionRow()
.addComponents([Button4, Button5, Button6]);
await client.sendComponents('Channel ID', [actionRow, actionRow2], 'Hi');
// Send multiple SelectMenus.
const menuRow1 = new ErisComponents.ActionRow()
.addComponent(menu1);
const menuRow2 = new ErisComponents.ActionRow()
.addComponent(menu2);
await client.sendComponents('Channel ID', [menuRow1, menuRow2], 'Hi');
// Send components with embed (Discord deprecated)
await client.sendComponents('Channel ID', button, { content: 'Components with embed', embed: { title: 'Hi' } });
// Send components with multiple embeds.
await client.sendComponents('Channel ID', button, { content: 'Components with embed', embeds: [{ title: 'Hi' }, { title: 'Just another embed' }] });
// You can use all the message options available from the Discord API. See https://discord.com/developers/docs/resources/channel#create-message-jsonform-params
- EditComponents |
.editComponents(APIMessage | Eris.Message, components, content, file)
-> DiscordAPIRequest
Edit a message and give the possibility to add or edit components.
const msg = await client.sendComponents('Channel ID', Button, 'Message here.');
await client.editComponents(msg, [Button1, Button2], 'This message is edited.');
// Or
const msg2 = await client.createMessage('Channel ID', 'Message');
await client.editComponents(msg2, [Button1, Button2], 'This message is edited.');
// And if you want to delete all components just do:
const msg3 = await client.sendComponents('Channel ID', Button, 'This message has components.');
await client.editComponents(msg3, [], 'This message is edited and has no components.');
- EditInteraction |
.editInteraction(resBody, components, content, file)
-> DiscordAPIRequest
Edits the original message when an interaction is emitted. All options of client.sendComponents are available.
client.on('clickButton', async (resBody) => {
await client.editInteraction(resBody, button, 'Hi, this message is edited.'); // Edit the message when a button is clicked.
})
- ReplyInteraction |
.replyInteraction(resBody, components, content, options, type, file)
-> DiscordAPIRequest
Sends a new message when an interaction is emitted. All options of client.sendComponents are available.
client.on('clickButton', async (resBody) => {
// Send normal message.
await client.replyInteraction(resBody, [], 'Hi, this message has no buttons.'); // Send a message when a button is clicked with no components.
// Send normal message with button.
await client.replyInteraction(resBody, button, 'Hi, this message has buttons.'); // Send a message when a button is clicked with components.
// Send ephemeral message with buttons.
await client.replyInteraction(resBody, [button1, button2], 'Hi, this message has buttons and only you can see this.', { ephemeral: true });
// Send a message with custom type and embeds.
await client.replyInteraction(resBody, [button1, button2], { embeds: [embed1, embed2] }, { ephemeral: true }, 5); // Type 5. See https://discord.com/developers/docs/interactions/receiving-and-responding#interaction-response-object-interaction-callback-type
})
- AwaitComponents |
.awaitComponents(filter, channel, options, thisArg)
-> resBody | error
Await Components on a channel.
const filter = ((body) => body.data.custom_id == 'ID here.'); // Example filter.
const channel = message.channel.id; // Example channel.
const options = {
time: 10000 // Max time to wait for a interaction response. Put 0 to not put a limit. It is highly recommended to set a time limit.
};
const resBody = await client.awaitComponents(filter, channel, options).catch(err => console.log('Out of time.'));
console.log(resBody);
- CreateComponentsCollector |
.createComponentsCollector(filter, channel, options, thisArg)
-> resBody
Call ComponentsCollector Class. See the ErisClient.ComponentsCollector class for full details.
const filter = ((body) => body.data.custom_id == 'ID here.'); // Example filter.
const channel = message.channel.id; // Example channel.
const options = {
time: 10000 // Max time to wait for a interaction response. Put 0 to not put a limit. It is highly recommended to set a time limit.
};
const collector = client.createComponentsCollector(filter, channel, options);
collector.on('collect', (resBody) => {
console.log('Collected:', resBody);
});
collector.on('end', (collected) => {
console.log('Collector end. Collected:', collected);
});
Installation
If you have installation issues, join our support server.
Linux & Windows
Node Package Manager (NPM)
- Open: CMD
- Put:
npm i eris-components@latest
Yarn
- Open: CMD
- Put:
yarn add eris-components@latest
Mac
Node Package Manager (NPM)
- Install: XCode
- Put:
npm i eris-components@latest
Yarn
- Install: XCode
- Put:
yarn add eris-components@latest