Modals

Modals are like your annoying pop-ups, but cooler! These interactions will display a pop-up window on the user's client, which when submitted, will fire this event. The great thing about modals is that they're going to be handled just like any other interaction!

warning

There is no way to determine if or how the user closed the modal.

CommonJS

const { InteractionHandler, InteractionHandlerTypes } = require('@sapphire/framework');

class ModalHandler extends InteractionHandler {
  constructor(ctx, options) {
    super(ctx, {
      ...options,
      interactionHandlerType: InteractionHandlerTypes.ModalSubmit
    });
  }

  parse(interaction) {
    if (interaction.customId !== 'hello-popup') return this.none();

    return this.some();
  }

  async run(interaction) {
    await interaction.reply({
      content: 'Thank you for submitting the form!',
      ephemeral: true
    });
  }
}
module.exports = {
  ModalHandler
};

ESM

import { InteractionHandler, InteractionHandlerTypes } from '@sapphire/framework';

export class ModalHandler extends InteractionHandler {
  constructor(ctx, options) {
    super(ctx, {
      ...options,
      interactionHandlerType: InteractionHandlerTypes.ModalSubmit
    });
  }

  parse(interaction) {
    if (interaction.customId !== 'hello-popup') return this.none();

    return this.some();
  }

  async run(interaction) {
    await interaction.reply({
      content: 'Thank you for submitting the form!',
      ephemeral: true
    });
  }
}

TypeScript

import { InteractionHandler, InteractionHandlerTypes } from '@sapphire/framework';
import type { ModalSubmitInteraction } from 'discord.js';

export class ModalHandler extends InteractionHandler {
  public constructor(ctx: InteractionHandler.LoaderContext, options: InteractionHandler.Options) {
    super(ctx, {
      ...options,
      interactionHandlerType: InteractionHandlerTypes.ModalSubmit
    });
  }

  public override parse(interaction: ModalSubmitInteraction) {
    if (interaction.customId !== 'hello-popup') return this.none();

    return this.some();
  }

  public async run(interaction: ModalSubmitInteraction) {
    await interaction.reply({
      content: 'Thank you for submitting the form!',
      ephemeral: true
    });
  }
}