Pagination Embed with Discord Buttons introduced in Discord.js v13

Ryzyx — Mon, 02 Aug 2021 16:46:24 +0000

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(

…

View on GitHub

My GitHub
The package used on npmjs.com

DEV Community: Ryzyx