dpager

Discord.js Pager

Install

npm i @fyleto/dpager
yarn add @fyleto/dpager

Use

const { Pager } = require("@fyleto/dpager");

import { Pager } from "@fyleto/dpager";

Pager

Class that defines the page handler.

Constructor

• title (optional): Default title to use for pages that do not have it's own title

const { Pager } = require("@fyleto/dpager");

const pages = new Pager("shop");

Methods

addPage

Add a singular page.

• T : Content of the page (string)
• T (overload) : Content, title and others for the page's embed (object)

const pages = new Pager();

pages.addPage("what's up"); // add page a from string
pages.addPage({
    title: "Page title",
    content: "Page content",
}); // add a page from an object

addPages

Add multiple pages at once

• ...T: Content of the page (string)
• ...T (overload) : Content, title and others for the page's embed (object)

const pages = new Pager();

pages.addPages("what's up", "my name's ko!"); // add page a from string
pages.addPages(
    {
        title: "Page title",
        content: "Page content",
    },
    {
        title: "goofy",
        content: "mhm",
    }
); // add a page from an object

removePage

Remove one page by it's index

• index: Page index (0-indexed, so page 1 is 0)

pages.removePage(1); // removes page 2

addDynamicPages

Dynamically pages from an array of strings

• array: Array of strings
• maxContentperPage: Amount of content on a page before it goes to the next page
• seprator(optional): Seprator to seprate content on one page

pages.addDynamicPages(["hi", "im", "dy", "namic!", "cool?"], 2, "\n"); // separator defaults to a line break. I just addedd for example's sake

// equavalent to

pages.addPages("hi\nim", "dy\nnamic!", "cool?");

config

Change the buttons. (You cannot edit the customIds and it's recommended you don't or else this won't work)

• i: Object of new buttons (Should look something like this):

const {ButtonStyle} = require("discord.js")

let buttons = {
    nextPage: {}, // button to go over to the next page
    prevPage: {}, //  button to go to the previous page
    prevMaxPage: {}, // button to skip to the first page
    nextMaxPage: {} // button to skip to the last page
}

// and those objects can accept these following parameters:

{
    label: "Button label",
    style: ButtonStyle.Success,
    emoji: "Button emoji"
}

pages.config(i)

currentPage

Returns an object with the current page's embed, components and raw contents if you do not want it's embed

• customId (optional): When given the customId, it will go to the page based on the id (So if you pass "nextPage" into it, It will change the index and return the object for the next page. and etc)

pages.currentPage(); // on page 1, returns page 1 contents
pages.currentPage("nextPage"); // on page 2 now, returns page 2 contents
pages.currentPage(); // still on page 2
pages.currentPage("prevPage"); // back on page 1, returns it's contents now

returns

{
    embed: // instance of EmbedBuilder that you can add to an interaction.reply/update,
    components: // array of components that contains the required buttons
    raw: {
        title: // page's title if given. If not, is undefined
        content: // page's content.
    }
}

Properties

pages

Array of the pages.

pages.pages;

index

Current page index. (0-indexed)

pages.index;

Example

const { Pager } = require("@fyleto/dpager");
const { ComponentType, ButtonStyle } = require("discord.js");

// place this code either in an "interactionCreate" event or any slash command event that takes interaction as a parameter

const pager = new Pager();

pager.addDynamicPages(
    [
        "This page content",
        "is seprated",
        "wow",
        "isnt that cool?",
        "no",
        "it's not cool :pensive:",
        "Yes you nerd.",
    ],
    2
);

// We don't define the labels, so the default labels (arrows) are used.
pager.config({
    nextPage: {
        style: ButtonStyle.Primary,
    },
    prevPage: {
        style: ButtonStyle.Primary,
    },
    nextMaxPage: {
        style: ButtonStyle.Danger,
    },
    prevMaxPage: {
        style: ButtonStyle.Danger,
    },
});

let initPage = await pager.currentPage();
let index = `Page ${pager.index + 1}/${pager.pages.length}`;

await interaction.reply({
    content: index,
    embeds: [initPage.embed],
    components: initPage.components,
});

const reply = await interaction.fetchReply();

const collector = reply.createMessageComponentCollector({
    componentType: ComponentType.Button,
    time: 15_000,
});

collector.on("collect", async (i) => {
    let page = await pager.currentPage(i.customId);
    let index = `Page ${pager.index + 1}/${pager.pages.length}`;
    i.update({
        content: index,
        embeds: [page.embed],
        components: page.components,
    });
});

Do not mind my chromebook's bad quality