# discord-modals > Discord-Modals is a package that allows your discord.js v13 and v14 bot to create, and interact with Modals, a new Discord feature. Latest version **1.3.9** (published 2022-08-04) ยท MIT license ยท 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install discord-modals pnpm add discord-modals yarn add discord-modals bun add discord-modals ``` ## Health **Score 10/100 (F)** โ€” status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.3.9 | | Published | 2022-08-04 | | First published | 2022-02-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 74 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 90 | | Author | ใ€Ž๐‘ด๐’‚๐’•๐’†๐’แต—แต‰แตใ€#9999 | | Maintainers | mateo_dev | | Keywords | discord.js, modals, interaction modals, modal interactions, forms, modal form, discord-forms, discord-modals, discord, discord.js-modals, discord.js-forms | ## Links - npm: https://www.npmjs.com/package/discord-modals - Repository: https://github.com/Mateo-tem/discord-modals - Homepage: https://github.com/Mateo-tem/discord-modals#readme - Issues: https://github.com/Mateo-tem/discord-modals/issues - npm.io page: https://npm.io/package/discord-modals ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) โ€” 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) โ€” 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) โ€” 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) โ€” 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) โ€” 836.4K weekly downloads ## Recent versions - 1.3.9 (latest) โ€” 2022-08-04 - 1.3.8 โ€” 2022-08-04 - 1.3.7 โ€” 2022-06-05 - 1.3.6 โ€” 2022-05-16 - 1.3.5 โ€” 2022-04-06 - 1.3.4 โ€” 2022-04-06 - 1.3.3 โ€” 2022-04-02 - 1.3.2 โ€” 2022-03-20 - 1.3.1 โ€” 2022-03-19 - 1.3.0 โ€” 2022-03-19 - 1.2.9 โ€” 2022-03-14 - 1.2.8 โ€” 2022-03-12 - 1.2.7 โ€” 2022-03-09 - 1.2.6 โ€” 2022-03-08 - 1.2.5 โ€” 2022-03-08 - โ€ฆ 25 more at https://npm.io/package/discord-modals/versions ## README
Discord Modals

npm

> **A package that allows your discord.js v13 and v14 bot to create, and interact with Modals, a new Discord feature.** # ๐Ÿ”Ž Installation ```sh npm install discord-modals yarn add discord-modals ``` # ๐Ÿ”ฎ What is this package for? Recently, Discord API officialy announced **[Modal Interactions](https://discord.com/developers/docs/change-log#interaction-modals-and-application-command-attachment-option-type)**. **What is that?** Modal is a popup of Text Input Components [[Example]](https://discord.com/assets/2087c4210e4723cc26ac1b265940c499.png). 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!** # โœจ Setup The most recommended is to put this on your main file. ```js 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. # โ“ How can i use it? > 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](https://discord.com/developers/docs/interactions/message-components#text-inputs). **Modals have:** - A Title - A Custom Id - Components (Action Rows with Text Inputs) **Text Inputs have:** - A Custom Id - A Style (Short or Paragraph) - A Label - A minimum length - A maximum length - A value (A prefilled value if there is not text) - And...a placeholder 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. # ๐Ÿ“œ Examples If you are ready, take this examples. - First, we are going to create a Modal. ```js 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.** - We are going to create and add a Text Input Component and a Select Menu to the Modal. ```js 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?** - We are going to use the `showModal()` method to send the modal in an interaction. ```js 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?** ## ๐Ÿ“ข Events: Receiving Modal Submit Interaction and extracting data - discord-modals integrates to your Client a new event called `modalSubmit`. We are going to use it. - To have access to the responses, just use the `.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. ```js 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 :)** Modal Test # ๐Ÿ“š Documentation - Check our documentation [here](https://github.com/Mateo-tem/discord-modals/blob/master/DOCS.md). # โ“ FAQ Can I show a modal, replying to a modal? - No, Discord API don't support that, but there are plans to add that. Can I add buttons/select menus to modals? - Yes, but only select menus are supported at this moment. Discord API have plans to add other type of components. Be patient :) Can I show a modal in a message? - No, modals are **only for interactions** (Select Menus, Slash Commands, Buttons and Context Menu Commands). They are a response for interactions. Can I add more than 5 Components in a modal? - No, a modal supports **5 Action Rows (containing 1 Text Input Component or Select Menu per row)**. There is no plans in Discord API to increase the amount of rows per 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. - Discord is still developing it, so the select menu is not being displayed in this type of clients. For now, only works in desktop/web client. Use it at your own risk. # ๐Ÿ”จ Developers - ใ€Ž๐‘ด๐’‚๐’•๐’†๐’แต—แต‰แตใ€#9999 # โ›” Issues/Bugs? > **Please report it on our GitHub Repository [here](https://github.com/Mateo-tem/discord-modals/issues) to fix it inmmediately or join to the support server.** > **Credits:** This package is based on discord.js, code base was extracted for this. --- _Source: https://npm.io/package/discord-modals ยท Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._