discord-modals is a package that allows your bot of discord.js v13 to create the new Discord Modals and interact with them.
A package that allows your discord.js v13 and v14 bot to create, and interact with Modals, a new Discord feature.
npm install discord-modals
yarn add discord-modals
Recently, Discord API officialy announced Modal Interactions.
What is that? Modal is a popup of Text Input Components [Example]. It's so cool and useful for many commands that needs arguments. Discord-Modals can be a solution if you want to test or use Modals right now. Supports discord.js v13 and v14. Try it!
The most recommended is to put this on your main file.
const { Client } = require('discord.js'); // Get the Client class
const client = new Client(); // Create a Discord Client, with intents and what you need
const discordModals = require('discord-modals'); // Define the discord-modals package!
discordModals(client); // discord-modals needs your client in order to interact with modals
client.login('token'); // Login with your bot token
Important: Don't forget to put
discordModals(client)
, will be essential to receive the Modal Submit Interaction.
First of all, we need to understand that Modals and Text Input Components are completely different. Modals is a popup that shows the text input components and text input are the components of modals. To understand better, you can explore the Discord API Documentation here.
Modals have:
Text Inputs have:
If you have understood this, you can continue on "Examples" section.
Important: Modals also support select menus. So, you need to know the select menu structure.
If you are ready, take this examples.
const { Modal } = require('discord-modals'); // Modal class
const modal = new Modal() // We create a Modal
.setCustomId('modal-customid')
.setTitle('Modal')
.addComponents();
This is a basic structure of a Modal, but something is missing. Yeah! Components.
const { Modal, TextInputComponent, SelectMenuComponent } = require('discord-modals'); // Import all
const modal = new Modal() // We create a Modal
.setCustomId('modal-customid')
.setTitle('Modal')
.addComponents(
new TextInputComponent() // We create a Text Input Component
.setCustomId('name')
.setLabel('Name')
.setStyle('SHORT') //IMPORTANT: Text Input Component Style can be 'SHORT' or 'LONG'
.setPlaceholder('Write your name here')
.setRequired(true), // If it's required or not
new SelectMenuComponent() // We create a Select Menu Component
.setCustomId('theme')
.setPlaceholder('What theme of Discord do you like?')
.addOptions(
{
label: 'Dark',
description: 'The default theme of Discord.',
value: 'dark',
emoji: '⚫',
},
{
label: 'Light',
description: 'Some people hate it, some people like it.',
value: 'light',
emoji: '⚪',
},
),
);
Yay! We have the full Modal, but... How can i send/show a Modal?
showModal()
method to send the modal in an interaction.const { Modal, TextInputComponent, SelectMenuComponent, showModal } = require('discord-modals'); // Import all
const modal = new Modal() // We create a Modal
.setCustomId('modal-customid')
.setTitle('Modal')
.addComponents(
new TextInputComponent() // We create a Text Input Component
.setCustomId('name')
.setLabel('Name')
.setStyle('SHORT') //IMPORTANT: Text Input Component Style can be 'SHORT' or 'LONG'
.setPlaceholder('Write your name here')
.setRequired(true), // If it's required or not
new SelectMenuComponent() // We create a Select Menu Component
.setCustomId('theme')
.setPlaceholder('What theme of Discord do you like?')
.addOptions(
{
label: 'Dark',
description: 'The default theme of Discord.',
value: 'dark',
emoji: '⚫',
},
{
label: 'Light',
description: 'Some people hate it, some people like it.',
value: 'light',
emoji: '⚪',
},
),
);
client.on('interactionCreate', (interaction) => {
// Let's say the interaction will be a Slash Command called 'ping'.
if (interaction.commandName === 'ping') {
showModal(modal, {
client: client, // Client to show the Modal through the Discord API.
interaction: interaction, // Show the modal with interaction data.
});
}
});
Congrats! You show the Modal to the Interaction User. Now, how can i receive the Modal Interaction?
modalSubmit
. We are going to use it..getTextInputValue()
method with the Custom Id of the Text Input Component, or if you use Select Menus, the same way, use the .getSelectMenuValues()
method with the Custom Id of the Select Menu Component.Recommendation: Put your
modalSubmit
event on your main file or in an Event Handler.
client.on('modalSubmit', async (modal) => {
if (modal.customId === 'modal-customid') {
const nameResponse = modal.getTextInputValue('name');
const themeResponse = modal.getSelectMenuValues('theme');
modal.reply(
`Thank you for answering the form! Powered by discord-modals.\nSo, you are **${nameResponse}** and you like the **${themeResponse}** theme. Awesome!`,
);
}
});
And you made it! I hope this examples help you :)
Can I show a modal, replying to a modal?
Can I add buttons/select menus to modals?
Can I show a modal in a message?
Can I add more than 5 Components in a modal?
DiscordAPIError: Interaction has already been acknowledged.
The showModal()
method is a response of an interaction. also reply()
or deferReply()
are responses of an interaction.
If you give a response, you can't give a response again. So you need to remove reply()
or editReply()
on your code.
If that doesn't work, probably you have the modalSubmit
event on the same file of your command, please just add it to a event handler or just separate it.
The Select Menu in Modal is not being displayed in mobile/phone.
Please report it on our GitHub Repository here to fix it inmmediately or join to the support server.
Credits: This package is based on discord.js, code base was extracted for this.