Building components

Components are built with a builder, which is a JavaScript class, which represents it. Within this builder you can customize the component such it’s text or it’s color.

There are diffrent types of components’ builders with diffrent customization but all have a common property: the custom Id. A unique identifier which is used for handling the interactions of the component.

ActionRow

All the builders are sent within an ActionRow. Each message can contain a maxium of 5 actions row.

Here is how we create a basic ActionRow:

import { ActionRow } from 'seyfert';

const row = new ActionRow()

  .setComponents([])

  .addComponents();

Building each component

Now we are going to build each type of component and set it within an ActionRow:

button.ts

Buttons

An ActionRow shouldn’t contain more than 5 buttons.

import { ActionRow, Button } from 'seyfert';
import { ButtonStyle } from 'seyfert/lib/types';

const button = new Button()
  .setCustomId('first-button')
  .setStyle(ButtonStyle.Primary)
  .setLabel('First Button');

const row = new ActionRow<Button>().setComponents([button]);

menu.ts

Select Menu

An ActionRow shouldn’t contain more than one select menu.

They are diffrent types of select menus: StringSelectMenu, UserSelectMenu, RoleSelectMenu, ChannelSelectMenu and MentionableSelectMenu.

We are going to make diffrent action rows for each select menu.

import {
  ActionRow,
  StringSelectMenu,
  StringSelectOption,
  UserSelectMenu,
  RoleSelectMenu,
  ChannelSelectMenu,
  MentionableSelectMenu
} from 'seyfert';

const stringMenu = new StringSelectMenu()
  .setCustomId('string-menu')
  .setPlaceholder('Select an string option')
  .setOptions(
    new StringSelectOption().setLabel('Option 1').setValue('1'),
    new StringSelectOption().setLabel('Option 2').setValue('2')
  );

const stringRow = new ActionRow<StringSelectMenu>().setComponents([stringMenu]);

const userMenu = new UserSelectMenu()
  .setCustomId('user-menu')
  .setPlaceholder('Select an user')
  //user id's
  .setDefaultUsers('123456789', '987654321');

const userRow = new ActionRow<UserSelectMenu>().setComponents([userMenu]);

const roleMenu = new RoleSelectMenu()
  .setCustomId('role-menu')
  .setPlaceholder('Select a role')
  //role id's
  .setDefaultRoles('123456789', '987654321');

const roleRow = new ActionRow<RoleSelectMenu>().setComponents([roleMenu]);

const channelMenu = new ChannelSelectMenu()
  .setCustomId('channel-menu')
  .setPlaceholder('Select a channel')
  //channel id's
  .setDefaultChannels('123456789', '987654321');

const channelRow = new ActionRow<ChannelSelectMenu>().setComponents([
  channelMenu
]);

const mentionableMenu = new MentionableSelectMenu()
  .setCustomId('mentionable-menu')
  .setPlaceholder('Select a mentionable')
  //mentionable id's (role or user)
  .setDefaultMentionables(
    { type: 'User', id: '123456789' },
    { type: 'Role', id: '987654321' }
  );

const mentionableRow = new ActionRow<MentionableSelectMenu>().setComponents([
  mentionableMenu
]);

input.ts

TextInputs

An ActionRow shouldn’t contain more than one text input.

A text input is a component that is unique in modals and can’t only be attached within action rows in a modal.

import { ActionRow, TextInput } from 'seyfert';

import { TextInputStyle } from 'seyfert/lib/types';

const input = new TextInput()
  .setCustomId('textinput')
  .setLabel('My Name')
  .setPlaceholder('Enter text')
  .setStyle(TextInputStyle.Short)
  .setLength({ min: 10, max: 30 });

const row = new ActionRow<TextInput>().setComponents([input]);

After creating the components you will have to send the ActionRow into the components field. See below.