Component

一覧

import {
  // Action Row
  makeActionRow,
  // Buttons
  makeButton,
  makeLinkButton,
  makePremiumButton,
  // Selects
  makeStringSelect,
  makeUserSelect,
  makeRoleSelect,
  makeMentionableSelect,
  makeChannelSelect,
  // Modal Inputs
  makeTextInput,
  makeFileUpload,
  makeRadioGroup,
  makeCheckboxGroup,
  makeCheckbox,
  // Layout, Content
  makeSection,
  makeTextDisplay,
  makeThumbnail,
  makeMediaGallery,
  makeFile,
  makeSeparator,
  makeContainer,
  makeLabel,
  // Child Component
  makeStringSelectOption,
  makeMediaGalleryItem,
  makeUnfurledMediaItem,
  makeRadioGroupOption,
  makeCheckboxGroupOption,
} from 'discord-hono'

各コンポーネントの役割などは公式ドキュメントを参照してください。

メッセージ Components

import { DiscordHono, makeActionRow, makeButton } from 'discord-hono'

const app = new DiscordHono().command('component', c =>
  c.res({
    content: 'コンポーネント',
    components: [
      makeActionRow([makeButton('id1', '1'), makeButton('id2', '22')]),
      makeActionRow([makeButton('id3', '333'), makeButton('id4', '4444')]),
    ],
  }),
)

コンポーネント
[1][22]
[333][4444]

Buttons

import {
  makeActionRow,
  makeButton,
  makeLinkButton,
  buttonStyle,
} from 'discord-hono'

const components = [
  makeActionRow([
    makeButton('custom_id', 'label'),
    makeButton('button', ['✅', 'ボタン'])
      .custom_value('value')
      .style(buttonStyle.Secondary)
      .disabled(true),
    makeLinkButton('https://example.com', 'リンク'),
  ]),
]

custom_id は app.component() で識別するために使います。
また、custom_id に ; は使用できません。

IDEが対応していれば、. を打つと候補となるメソッド一覧をみれます。

メソッドの内容は公式ドキュメントを参照してください。

.custom_value()

.custom_value() はライブラリ独自の受渡し変数です。custom_id を含めて99文字までです。

import {
  makeActionRow,
  makeButton,
  makeSlashCommand,
  makeStringOption,
} from 'discord-hono'
import { factory } from '../init'

export const command_command = factory.command(
  makeSlashCommand('command', 'description').options([
    makeStringOption('value', 'ボタンへ継承').required(true),
  ]),
  c =>
    c.res({
      content: 'ボタン',
      components: [
        makeActionRow([component_button.component.custom_value(c.var.value)]),
      ],
    }),
)

export const component_button = factory.component(
  makeButton('button', ['✅', 'ボタン']),
  c => c.update().res(`value: ${c.ref.custom_value}`),
)

.custom_value() を使うことで、ボタン側のハンドラーへ必要な変数の受渡しが可能です。

ページネーションがこの機能を使用しています。

Select 要素なども同様に .custom_value() を使うことができます。

Selects

import {
  makeActionRow,
  makeStringSelect,
  makeChannelSelect,
} from 'discord-hono'

const components = [
  makeActionRow([
    makeStringSelect('custom_id', [
      ['value', 'label'],
      ['value2', ['👉', 'label2']],
    ]),
    makeChannelSelect('channel_custom_id').channel_types([0]),
  ]),
]

unique-id は app.component() で識別するために使用されます。
また、unique-id に ; は使用できません。

IDEが対応していれば、. を打つと候補となるメソッド一覧をみれます。

メソッドの内容は公式ドキュメントを参照してください。

.custom_value() はライブラリ独自の受渡し変数です。custom_id を含めて99文字までです。

入力データの取得

import { makeStringSelect } from 'discord-hono'
import { factory } from '../init'

export const component_select = factory.component(
  makeStringSelect('select', [
    ['value', 'label'],
    ['value2', ['👉', 'label2']],
  ]),
  c => c.update().res(`value: ${c.ref.values?.[0]}`),
)

Components V2

Components V2 を利用する際、 c.flags('IS_COMPONENTS_V2') を必ず指定してください。

import {
  buttonStyle,
  makeActionRow,
  makeButton,
  makeContainer,
  makeMediaGallery,
  makeSection,
  makeSeparator,
  makeSlashCommand,
  makeTextDisplay,
  makeThumbnail,
} from 'discord-hono'
import { factory } from '../init'

export const command_components_v2 = factory.command(
  makeSlashCommand('components_v2', 'response components_v2'),
  async c =>
    c.flags('EPHEMERAL', 'IS_COMPONENTS_V2').resDefer(async () => {
      const image = await fetch('https://luis.fun/images/hono.webp')
      const blob = new Blob([await image.arrayBuffer()])
      const res = await c
        .followup(
          {
            components: [
              makeTextDisplay('text top'),
              makeContainer([
                makeActionRow([component_delete.component]),
                makeSeparator(),
                makeTextDisplay('container - text'),
                makeSection(
                  [
                    makeTextDisplay('container - section - text'),
                    makeTextDisplay('container - section - text2'),
                  ],
                  makeThumbnail('attachment://image.webp'),
                ),
                makeTextDisplay('container - text2'),
                makeMediaGallery(['attachment://image.webp']),
              ]),
            ],
          },
          { blob, name: 'image.webp' },
        )
        .then(r => r.json())
      console.log(res)
    }),
)

export const component_delete = factory.component(
  makeButton('delete', ['🗑️', 'Delete']).style(buttonStyle.Secondary),
  c => c.update().resDefer(c => c.followup()),
)