This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

discordjs-modal

Index

• Description
• Install
• Report a bug
• Incorporate to discord.js
  • Uploading the package to the main file
  • Working with events
  • Send modal
• Documentation
  • Structures
    • Modal
      • Constructor
      • Properties
      • Methods
    • TextInput
      • Constructor
      • Properties
      • Methods
  • Events
    • modal
      • Example
  • Types
    • ModalOptions
    • TextInputOptions
    • TextInputStyles

Description

discordjs-modal is a dedicated package for developers who want to use the new modals in discord.js

Install

npm install discordjs-modal

Report a bug

Any bug that occurs while you are using discordjs-modal and the error is produced by discordjs-modal you can report it by contacting me through discord, tag: Risto#5227 Preferably send a screenshot of the console, a brief description of the error and in case of power, a capture or the code where the error is occurring

Incorporate to discord.js

Uploading the package to the main file

const { Client } = require('discord.js') // Get the Client class
const client = new Client({ intents: 32767 }) // Create a new Client
const discordjsModal = require('discordjs-modal') // Define this package
discordjsModal(client); // It is necessary to have your client to be able to know when a modal is executed

client.login('token') // Login with your discord bot

Working with events

const {} = require('discordjs-modal')
client.on(`interactionCreate`, (interaction) =>{
 if(interaction.isCommand()) {
  if(interaction.commandName == "ping") {
     const modal = new Modal())
     .setCustomId("example")
     .setTitle("Example Modal")
     .addComponents(
       new TextInput()
       .setLabel("What is your real name?")
       .setStyle("SHORT")
       .setPlaceholder("Enter your real name here")
       .setCustomId("name")
       .setRequired(true),
       new TextInput()
       .setLabel("How old are you?")
       .setStyle("SHORT")
       .setMax(3)
       .setCustomId("AGE")
       .setPlaceholder("Enter your age")
       )
   }
 }
})

---

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)

To receive the Modal you can go to the section event Modal example

Documentation

Structures

Modal

Constructor

new Modal(data)

Parameter	Type	Optional	Default	Description
data	ModalOptions or Modal	true	{ }	Modal to clone or raw Modal data

Properties

.title

The title of this Modal

Return: ?string

---

.custom_id

A unique string that will be sent in the interaction when the Modal is sent

Return: ?string

---

.components

The components in this Modal

Return: ?Array<TextInput>

---

Methods

.setTitle(title)

Sets the title of this Modal

Parameter	Type	Description
title	string	The title of this Modal

Return: Modal

---

.setCustomId(custom_id)

Sets the custom id for this Modal

Parameter	Type	Description
custom_id	string	A unique string that will be sent in the interaction when the Modal is sent

Return: Modal

---

.addComponents(components)

Adds components to the Modal

Parameter	Type	Description
components	Array<TextInput>	The components to add

Return: Modal

---

Text Input

Constructor

new TextInput(data)

Parameter	Type	Optional	Default	Description
data	TextInputOptions	true	{ }	TextInput to clone or raw TextInput data

Properties

.custom_id

A unique string that will be sent in the interaction when the Modal is sent and TextInput is rellenated

Return ?string

---

.label

The label for this component

Return: ?string

---

.style

The style of this TextInput

Return: ?TextInputStyles

---

.min_length

The minimum input length for a text input, min 0, max 4000

Return: ?number

---

.max_length

The maximum input length for a text input, min 1, max 4000

Return: ?number

---

.placeholder

Placeholder text in the input

Return: ?string

---

.required

Whether the TextInput is required

Return: ?boolean

---

Methods

.setCustomId(custom_id)

Sets the custom id for this Modal

Parameter	Type	Description
custom_id	string	A unique string that will be sent in the interaction when the Modal is sent and TextInput is rellenated

Return: TextInput

---

.setLabel(label)

Sets the label of this TextInput

Parameter	Type	Description
label	string	The text to be displayed on this TextInput

Return: TextInput

---

.setStyle(style)

Sets the style of this TextInput

Parameter	Type	Description
style	TextInputStyles	The style of this component

Return: TextInput

---

.setMinLength(min_length)

The minimum input length for a text input, min 0, max 4000

Parameter	Type	Description
min_length	number	Number of characters to be required

Return: TextInput

---

.setMaxLength(max_length)

The maximum input length for a text input, min 1, max 4000

Parameter	Type	Description
max_length	number	Number of characters to be allowed

Return: TextInput

---

.setPlaceholder(placeholder)

Custom placeholder text if the input is empty, max 100 characters

Parameter	Type	Description
placeholder	string	Custom placeholder text

Return: TextInput

---

.setRequired(required)

Custom placeholder text if the input is empty, max 100 characters

Parameter	Type	Description
required	boolean	Whether the option is required

---

Events

This package emits an event when it detects a Modal. You will be shown how to interact with the event

modal

Emitted when an modal is received

Parameter	Type	Description
interaction	Interaction	The received Modal

---

Example

client.on("modal", async(interaction) => {
 if(interaction.customId == "example"){
   await interaction.deferReply()
   var embed = new MessageEmbed()
   .setColor("GREEN")
   .setTitle("This is one example")
   .addField("What is your name?", interaction.fields[0].value)
   .addField("How old are you?", interaction.fields[1].value)
   await interaction.editReply({embeds:[embed]})
 }
})

---

Types

ModalOptions

Parameter	Type	Optional	Default	Description
title	string	true	none	The title of the popup modal
custom_id	string	true	none	Identifier for the component, max 100 characters
components	TextInputOptions	true	none	Between 1 and 5 (inclusive) components that make up the modal

---

TextInputOptions

Parameter	Type	Optional	Default	Description
custom_id	string	true	none	The id of the component
label	string	true	none	The label for this component
style	TextInputStyles	true	none	The TextInput Style
min_length	number	true	none	Minimum input length for a text input, min 0, max 4000
max_length	number	true	none	Maximum input length for a text input, min 1, max 4000
placeholder	string	true	none	Custom placeholder text if the input is empty, max 100 characters
value	string	true	none	A pre-filled value for this component, max 4000 characters
required	boolean	true	false	Whether this component is required to be filled

---

TextInputStyles

Name	Value	Description
Short	1	A single-line input
Paragraph	2	A multi-line input