Hey folks, this is my first dev.to post. I'll be covering how to use Buttons introduced in Discord.js v13 to paginate through Message Embeds.
Assuming you already know how to work with discord.js, lets get straight to the point. First of all you'll need this package discordjs-button-pagination. Install it by running
npm install discordjs-button-pagination.
Go to your desired file and declare it as such.
Note: Make sure to define MessageEmbed and MessageButton first if you haven't.
const paginationEmbed = require('discordjs-button-pagination')
And then define your embeds, for me I've taken this as an example:
const embed1 = new MessageEmbed()
.setTitle("First Page")
.setDescription("My First Dev.to Post");
const embed2 = new MessageEmbed()
.setTitle("Second Page")
.setDescription("The second page of my dev.to post");
The number of the embeds can be as much as you want. Moving on, now define how you'd like your Previous and Next button should look like. This package gives complete customization on how you want your buttons to be.
I've taken the buttons as such:
const button1 = new MessageButton()
.setCustomId("previousbtn")
.setLabel("Previous")
.setStyle("DANGER");
const button2 = new MessageButton()
.setCustomId("nextbtn")
.setLabel("Next")
.setStyle("SUCCESS");
After that all that's left is to make an array of the embeds and buttons, you can either declare the arrays as constants or pass them in raw. In this example, I am taking them as constants as such:
const pages = [
embed1,
embed2,
//....
//embedN (till the number of your embeds)
];
//create an array of buttons
const buttonList = [button1, button2];
Pass in the time you would like to make the collector run for as a constant or raw. In this case, I will be taking it as a const again for better explanation.
Note: The time should be in milliseconds
const timeout = 10000
Finally, call the function as such:
paginationEmbed(message, pages, buttonList, timeout);
Complete resulting code:
const paginationEmbed = require('discordjs-button-pagination');
const embed1 = new MessageEmbed()
.setTitle("First Page")
.setDescription("My First Dev.to Post");
const embed2 = new MessageEmbed()
.setTitle("Second Page")
.setDescription("The second page of my dev.to post");
const button1 = new MessageButton()
.setCustomId("previousbtn")
.setLabel("Previous")
.setStyle("DANGER");
const button2 = new MessageButton()
.setCustomId("nextbtn")
.setLabel("Next")
.setStyle("SUCCESS");
const pages = [
embed1,
embed2,
//....
//embedN (till the number of your embeds)
];
//create an array of buttons
const buttonList = [button1, button2];
const timeout = 10000;
paginationEmbed(message, pages, buttonList, timeout);
If you encounter any issues while following the tutorial, let me know in the comments
If you found this helpful, kindly consider supporting the repository by starring/forking.
ryzyx
/
discordjs-button-pagination
A simple package for pagination using buttons introduced in discord.js v13.
discordjs-button-pagination
A simple package to paginate discord embeds via discord buttons introduced in discord.js v13.
Versions
discordjs-button-pagination@interaction [Default]
for slash command interaction.
discordjs-button-pagination@msg
for message command.
Installation
For message event
npm install discordjs-button-pagination@msg
For interaction event
npm install discordjs-button-pagination@interaction
Default command: npm install discordjs-button-pagination will install the interaction version
Requirements
Node.js 16.6.1 or newer is required along with Discord.js 13.0.0 or newer.
Usage for Interaction (Slash Command)
Basic Bot Example
// Import the discordjs-button-pagination package
const paginationEmbed = require('discordjs-button-pagination');
// Use MessageEmbed to make pages
// Keep in mind that Embeds should't have their footers set since the pagination method sets page info there
const { MessageEmbed , MessageButton} = require('discord.js');
const embed1 = new MessageEmbed()
.setTitle('First Page')
.setDescription('This is the first page');
const embed2 = new MessageEmbed(…
Top comments (1)
Where to use this? paginationEmbed?