Index
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
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 |