djs-menu-v13
Create menu for your Discord Bot very easly
-
Make for Discord.js V13
- Work with Interaction
-
Create simple and complex Menu
- with button and select menu
-
Support event and callbacks
- For do whatever you want
Usefull link
How to use it ?
First step
First you need to install the module with
npm i djs-menu-v13
Then, import the module in your code
import {Menu, MenuPage} from 'djs-menu-v13';
// Or with require
const {Menu, MenuPage} = require('djs-menu-v13');
For this example, we gonna make two pages :
- The first one with a basic embed and a button to go to the second page
- The second one with a button to return to the first page and a button to exit the menu
First we need to create all the buttons we need :
const nextPageBtn = {
label: 'Go to second page',
target: 'secondPage', // The target is the ID of the page that we need to display when this button is clicked
style: 'PRIMARY',
};
const previousPageBtn = {
label: 'Go to first page',
target: 'firstPage',
style: 'PRIMARY',
};
const exitBtn = {
label: 'Exit',
// You can also put a function to execute when the button is clicked
target: (page, interaction, menu) => {
menu.stop();
interaction.editReply({
content: 'The menu has just been closed',
embeds: [],
components: [],
});
},
style: 'DANGER',
};
Then we need to create two embeds for our pages. You don't have to use an embed to make a page, just a content is enough.
const firstEmbed = new MessageEmbed()
.setColor('GREEN')
.setDescription('FIRST PAGE');
const secondEmbed = new MessageEmbed()
.setColor('YELLOW')
.setDescription('SECOND PAGE');
Now we can create our pages.
const firstPage = new MenuPage()
.addEmbed(firstEmbed)
.addButton(nextPageBtn)
.setId('secondPage'); // The id that the target in the button will use
const secondPage = new MenuPage()
.addEmbed(secondEmbed)
.addButton(previousPageBtn)
.addButton(exitBtn)
.setId('secondPage');
And finaly create the menu and start it
const menu = new Menu(interaction)
.addPage(firstPage)
.addPage(secondPage)
.start('firstPage');
GG you just start your first menu ! Now, you can listen to events emit by your menu
menu.on('stop', (interaction, reason) => {
if (reason === 'noReply' ) {
// Don't forget to clear embeds and components generated by the menu
interaction.editReply({
embeds: [],
components: [],
content: 'You did not respond quickly enough',
});
}
});
menu.on('pageChanged', (page, interaction, pages) => {
console.log('the page just changed');
});
Menu with Select Menu
You can also use select menu with buttons. Check this example to know how