DEV Community 👩‍💻👨‍💻

Ryzyx
Ryzyx

Posted on • Updated on

Pagination Embed with Discord Buttons introduced in Discord.js v13

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')
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Finally, call the function as such:

paginationEmbed(message, pages, buttonList, timeout);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo ryzyx / discordjs-button-pagination

A simple package for pagination using buttons introduced in discord.js v13.

discordjs-pagination

NPM info

discordjs-button-pagination

A simple package to paginate discord embeds via discord buttons introduced in discord.js v13.

Installation

  • npm install discordjs-button-pagination

Requirements

Node.js 14.0.0 or newer is required along with Discord.js 13.0.0

Usage

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()
                .setTitle('Second Page')
                .setDescription('This is the second page');

const button1 = new MessageButton()
                .setCustomId('previousbtn')
                .setLabel('Previous')
                .setStyle
Enter fullscreen mode Exit fullscreen mode

My GitHub
The package used on npmjs.com

Top comments (1)

Collapse
nimit2801 profile image
Nimit Savant

Where to use this? paginationEmbed?

Find what you were looking for? Sign up so you can:

 
🌚 Enable dark mode
🔠 Change your default font
📚 Adjust your experience level to see more relevant content