JSPM

discord.js-v13-modals

0.1.0-alpha
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5
  • Score
    100M100P100Q36321F
  • License Apache-2.0

Modals for Discord.js v13! (not my work tho)

Package Exports

  • discord.js-v13-modals
  • discord.js-v13-modals/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (discord.js-v13-modals) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Modals for Discord.js v13

** (Only works for 13.6.0 or lower).

Warning: When the modals are officially implemented in v13, this module will stop working on those versions to avoid any inconvenience.

How to install?

Just run:

npm install discord.js-v13-modals

How to use it?

Replace

const Discord = require('discord.js');

to

const Discord = require('discord.js-v13-modals');

how do I create a modal?

An example:

const { Modal, ActionRow, TextInputComponent, TextInputStyle } = require('discord.js-v13-modals');

const tvShowInputComponent = new TextInputComponent()
    .setCustomId('tvField')
    .setLabel('Favorite TV show')
    .setStyle(TextInputStyle.Short);

const haikuInputComponent = new TextInputComponent()
    .setCustomId('haikuField')
    .setLabel('Write down your favorite haiku')
    .setStyle(TextInputStyle.Paragraph);

const row1 = new ActionRow()
    .addComponents(tvShowInputComponent);

const row2 = new ActionRow()
    .addComponents(haikuInputComponent);

const modal = new Modal()
    .setTitle('My Awesome Form')
    .setCustomId('AwesomeForm')
    .addComponents(row1, row2);

How do I show/present a modal to the user?

Simply put:

// Present the modal to the user
await interaction.presentModal(yourModal);

How do I receive a modal?

client.on('interactionCreate', async (interaction) => {
    if (!interaction.isModalSubmission()) {
        return;
    }

    // Verify we have the right modal
    if (interaction.customId !== 'AwesomeForm') {
        return;
    }

    // Extract text input components from submitted modal
    const [favTVShow, favHaiku] = ['tvField', 'haikuField']
        .map(id => interaction.fields.getTextInputValue(id));
    
    // ACK the interaction
    await interaction.reply(`Favorite TV Show: ${favTVShow}, Favorite haiku: ${favHaiku}`);
});