discordjs-v14-pagination
v1.0.6
Published
Provides pagination for embeds in discord.js v14
Downloads
22
Maintainers
Readme
discordjs-v14-pagination
Provides pagination for embeds in discord.js v14 using slash commands
Table of Contents
1 Installation
npm install discordjs-v14-pagination
2 Requirements
- Discord.js version 14.7.1 or higher
- Node.js version 16.14.2 or higher
3 Usage
How to use this package
3.1 Importing
Import the package. You can pick any name you want for the import.
const paginationEmbed = require('discordjs-v14-pagination');
3.2 Embeds
Define an array of embeds. The embeds can look however you want, but the footer will be overwritten by the pagination embed.
const pageOne = new EmbedBuilder()
.setTitle('Page One')
.setDescription('This is page one');
const pageTwo = new EmbedBuilder()
.setTitle('Page Two')
.setDescription('This is page two');
const pageThree = new EmbedBuilder()
.setTitle('Page Three')
.setDescription('This is page three');
const embeds = [ pageOne, pageTwo, pageThree ];
3.3 Buttons
Define an array of buttons. You can choose whether to use two or four buttons.
If you use four buttons, the order is as follows: [ FIRSTPAGE, PREVIOUS, NEXT, LASTPAGE ]
.
If you use two buttons, the order is as follows: [ PREVIOUS, NEXT ]
.
You can give the buttons any custom id you want.
Note: The buttons will be disabled if there is no page to go to. For example, if you are on the first page, the first page and next page buttons will be disabled.
3.3.1 Example using four buttons
const firstPageButton = new ButtonBuilder()
.setCustomId('first')
.setEmoji('1029435230668476476')
.setStyle(ButtonStyle.Primary);
const previousPageButton = new ButtonBuilder()
.setCustomId('previous')
.setEmoji('1029435199462834207')
.setStyle(ButtonStyle.Primary);
const nextPageButton = new ButtonBuilder()
.setCustomId('next')
.setEmoji('1029435213157240892')
.setStyle(ButtonStyle.Primary);
const lastPageButton = new ButtonBuilder()
.setCustomId('last')
.setEmoji('1029435238948032582')
.setStyle(ButtonStyle.Primary);
const buttons = [ firstPageButton, previousPageButton, nextPageButton, lastPageButton ];
3.3.2 Example using two buttons
const previousPageButton = new ButtonBuilder()
.setCustomId('previous')
.setEmoji('1029435199462834207')
.setStyle(ButtonStyle.Primary);
const nextPageButton = new ButtonBuilder()
.setCustomId('next')
.setEmoji('1029435213157240892')
.setStyle(ButtonStyle.Primary);
const buttons = [ previousPageButton, nextPageButton ];
3.4 Pagination Embed
Create the pagination embed.
When providing the text for the footer, you can use
{current}
and{total}
as placeholders for the current page and the total number of pages.
paginationEmbed(
interaction, // The interaction object
embeds, // Your array of embeds
buttons, // Your array of buttons
60000, // (Optional) The timeout for the embed in ms, defaults to 60000 (1 minute)
'Page {current}/{total}' // (Optional) The text to display in the footer, defaults to 'Page {current}/{total}'
);
4 Screenshots
An example of how the pagination could look like.
You can change the style of the embeds and buttons however you like
4.1 Four Buttons
4.2 Two Buttons
When on the first page, all the buttons that take you to a previous page will be disabled. When on the last page, all the buttons that take you to a next page will be disabled. When the timeout ends, all buttons will be disabled.