Pagination Embed with Discord Buttons introduced in Discord.js v13
Tags: discord, discordjs, buttons, pagination
Published: 2021-08-02 16:46:24

Hey folks, this is my first dev.to post. I'll be covering how to use [Buttons](https://discord.com/developers/docs/interactions/message-components#buttons) introduced in [Discord.js v13](https://github.com/discordjs/discord.js) 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`](https://www.npmjs.com/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.

```js
const paginationEmbed = require('discordjs-button-pagination')
```
And then define your embeds, for me I've taken this as an example:

```js
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:
```js
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:

```js
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
```js
const timeout = 10000
```
Finally, call the function as such:
```js
paginationEmbed(message, pages, buttonList, timeout);
```

## Complete resulting code:
```js
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](https://github.com/ryzyx/discordjs-button-pagination) by starring/forking.
{% github ryzyx/discordjs-button-pagination %}

[My GitHub](https://github.com/ryzyx/)
The [package](https://www.npmjs.com/package/discordjs-button-pagination) used on npmjs.com