DiscordJS Reaction Menu
A simple, modern and easy to use reaction menu for discord.js.
Table of Contents
Installation
Install using npm:
npm install @xenon-devs/discordjs-reaction-menu
Or using yarn:
yarn add @xenon-devs/discordjs-reaction-menu
Usage
This package exports a single class, ReactionMenu
. Typescript typings are also included.
Usage:
const { ReactionMenu } = require('@xenon-devs/discordjs-reaction-menu');
const menu = new ReactionMenu({ // Initialize
pages,
channel,
timeout
})
menu.start([user1Id, user2Id]); // Start
See more examples.
ReactionMenu
This is the base class. See usage.
Constructor:
ReactionMenu(pages, channel, timeout = 60, customControlsEmojis = ReactionMenu.ControlsEmojiDefaults)
Arguments:
-
pages
: An array of IMenuPages. -
channel
: A TextChannel or DMChannel to send the menu in. -
timeout
: The time (in seconds) after which the menu stops working. (Default:60
) -
customControlsEmojis
: Optional custom controls emojis ie the next and back buttons. (Default: seeControlsEmojiDefaults
in theReactionMenu
properties below)
Properties:
-
controlsEmojis
: IControlsEmojis. -
menuMessage
: The message which is sent with the menu embed. -
reactionCollector
: The ReactionCollector associated with the menu. -
listenTo
: An array of User.id. Only these users can change the menu pages. Set in thestart
method below. -
currentPaage
: The 0-indexed number of the current page, that is, it's index in thepages
property. -
timeout
: The timeout in seconds after which the menu stops working. -
static ControlsEmojiDefaults
: The defaults for thecontrolsEmojis
property above. It's value is:{ first: '⏮️', next: '➡️', back: '⬅️', last: '⏭️' }
Methods:
-
start(listenTo, startPage)
: Sends the menu embed and starts the menu.-
listenTo
: An array of User.id. Only these users can change the menu pages. -
startPage
: The 0-indexed page at which the menu starts. (Default:0
)
-
-
displayPage(pageNumber)
: Display a page manually in code (apart from the reactions).-
pageNumber
: 0-indexed number of the page to be displayed.
-
-
stop()
: Stops the menu manually, before the timeout.
IMenuPage
An object of the format:
{
pageEmbed: embed, // The embed for this page.
customReaction?: string // Optional custom emoji to jump to this page.
}
Properties:
-
pageEmbed
: MessageEmbed for this page. -
customReaction
: Optional emoji string in the menu to jump to this page.
IControlsEmojis
An object of the format:
{
first: string, // Emoji to jump to the first page
next: string, // Emoji to go to the next page
back: string, // Emoji to go to the previous page
last: string // Emoji to jump to the last page
}
Default: See ControlsEmojiDefaults
property in ReactionMenu.
Examples
- Simplest Reaction Menu.
const { ReactionMenu } = require('@xenon-devs/discordjs-reaction-menu');
const { MessageEmbed } = require('discord.js');
const menu = new ReactionMenu(
[
{
pageEmbed: new MessageEmbed().setTitle('Page 1').setDescription('Click on emojis below to navigate.')
},
{
pageEmbed: new MessageEmbed().setTitle('Page 2')
}
},
{
pageEmbed: new MessageEmbed().setTitle('Page 3')
}
],
msg.channel // Get from an on('message') event listener.
)
menu.start([msg.author.id]) // Get from an on('message') event listener.
- Custom Controls Emojis.
const { ReactionMenu } = require('@xenon-devs/discordjs-reaction-menu');
const { MessageEmbed } = require('discord.js');
const menu = new ReactionMenu(
[
{
pageEmbed: new MessageEmbed().setTitle('Page 1').setDescription('Click on emojis below to navigate.')
},
{
pageEmbed: new MessageEmbed().setTitle('Page 2')
}
},
{
pageEmbed: new MessageEmbed().setTitle('Page 3')
}
],
msg.channel, // Get from an on('message') event listener.
60, // 60 seconds
{
next: '▶️',
first: '🏠',
back: '◀️',
last: '📄'
}
)
menu.start([msg.author.id]) // Get from an on('message') event listener.
- Custom Page Jump Emojis.
const { ReactionMenu } = require('@xenon-devs/discordjs-reaction-menu');
const { MessageEmbed } = require('discord.js');
const menu = new ReactionMenu(
[
{
pageEmbed: new MessageEmbed().setTitle('Page 1').setDescription('Click on emojis below to navigate.'),
customReaction: '🏠' // Click on this emoji to jump to this page
},
{
pageEmbed: new MessageEmbed().setTitle('Page 2 | Cats'),
customReaction: '🐱' // Click on this emoji to jump to this page
}
},
{
pageEmbed: new MessageEmbed().setTitle('Page 3 | Dogs'),
customReaction: '🐶' // Click on this emoji to jump to this page
}
],
msg.channel // Get from an on('message') event listener.
)
menu.start([msg.author.id]) // Get from an on('message') event listener.