Getting Started

💡 What is Discord Modal?

• The package helps you to create a modal, which is a new feature of Disocrd, but it is not supported at the moment in dscord.js, so this package will make it easier for you to do it with discord.js v13
• Note: You can use it with any optimist that depends on interactions, such as slash commands, buttons, select menus and others

📖 If you want to know all the details of the package

• You can take a look at the Documentation by clicking here

📦 Installation

You can start install the package on your project:

npm install discord-modal
yarn add discord-modal
pnpm add discord-modal

• CommonJS

const DiscordModal = require('discord-modal')

• ESM

import DiscordModal from 'discord-modal';

• To associate the package with your bot

DiscordModal(client)

📜 Example

import {DiscordModal,ModalBuilder,ModalField} from 'discord-modal';
const client = new Discord.Client({ 
  intents: ['GUILDS', 'GUILD_MESSAGES']//Set the intentions you want
});
client.on('ready', () =>  console.log(`Logged in as ${client.user.tag} (${client.user.id})`));

//This action is mandatory in order to be able to connect the bot with the package
DiscordModal(client)

client.on(`interactionCreate`,(interaction)=>{
 if(interaction.isCommand()){
  if(interaction.commandName == "ping"){
     const modal_data = new ModalBuilder()
     .setCustomId("submit_a_support_rank")
     .setTitle("Submit a support rank")
     .addComponents(
       new ModalField()
       .setLabel("what is your real name?")
       .setStyle("short")
       .setPlaceholder("Enter your real name here")
       .setCustomId("name")
       .setRequired(true),//Its default value is false,
       new ModalField()
       .setLabel("What is your favorite identity?")
       .setStyle("short")
       .setDefaultValue("JavaScript")
       .setMin(10)
       .setMax(55)
       .setCustomId("favorite"),
       new ModalField()
       .setLabel("Write a story from your life")
       .setStyle("paragraph")
       .setCustomId("story")
       .setPlaceholder("write here")
       )
       client.modal.open(interaction, modal_data) 
   }
 }
})

client.on("modalSubmitInteraction",async(interaction)=>{
 if(interaction.customId == 'submit_a_support_rank1'){
   await interaction.deferReply()
   let embed = new Discord.MessageEmbed()
   .setColor('GREEN')
   .setTitle('Submit a support rank')
   .addField('Your real name', '\`\`\`' + interaction.fields.getTextInputValue("name") + '\`\`\`')
   .addField('Your favorite identity', '\`\`\`' + interaction.fields.getTextInputValue("favorite") + '\`\`\`')
   .addField('Story of your life', '\`\`\`' +interaction.fields.getTextInputValue("story")+ '\`\`\`')
   await interaction.editReply({embeds:[embed]})
 }
})

client.login("your bot token")

🖼️ Pictures in the form of the code above this ↓

📩 Send Modal

• To send the Modal you need to execute an interaction before and the Modal to send. The client is automatically assigned a property which will allow you to send the Modal

• Following the previous example where a Modal was created, we would send the Modal as follows:

client.modal.send(interaction, modal_data)

📑 Documentation

• Check our documentation

🔗 Useful Links

• Documentation
• ST Studio is the best place to get support.
• The NPM package webpage is, well, the webpage for the NPM package.

👋 If you have a problem or have a suggestion,

• Contact With Me Discord: Shuruhatik#2443
• Github | Youtube

☑️ License

Refer to the LICENSE file.