# ComponentHandler

`class` in `http` · v0.12.0

<https://seedcord.org/docs/packages/http/0.12.0/classes/component-handler>

Shared base the customId-routed component handlers extend on the HTTP transport.

Not a public entry point. Extend [`ButtonHandler`](/docs/packages/http/0.12.0/classes/button-handler), [`ModalHandler`](/docs/packages/http/0.12.0/classes/modal-handler), or one of the select menu
bases instead. This class defines the customId decode, the route matching, and the source-message
verbs `update` and `deferUpdate`.

```ts
abstract class ComponentHandler<
    Event extends APIMessageComponentInteraction | APIModalSubmitInteraction,
    Defs extends readonly AnyCustomId[]
>
    extends InteractionHandler<Event>
    implements HasComponentDefs<Defs>
```

## Constructors

### constructor

```ts
InteractionHandler(
    event: Event,
    core: Core,
    dispatch: DispatchContext,
    sender: ReplySender
)
```

Constructs a new instance of the `InteractionHandler` class

## Properties

### api

```ts
protected api: API
```

Typed Discord REST API (`@discordjs/core/http-only`) over `core.rest`, one instance per core.
The interaction callbacks on `api.interactions` bypass the reply surface. The
`no-raw-interaction-acks` rule flags them in handler classes.

### core

```ts
readonly core: TCore
```

### dispatch

```ts
protected readonly dispatch: DispatchContext
```

The bag for this dispatch. Each interaction gets its own. Every handler for one event shares a single bag.

### event

```ts
protected readonly event: Event
```

### logger

```ts
protected readonly logger: Logger
```

### params

```ts
protected params: SingleParams<Defs>
```

The decoded params of the single route this handler is registered for.

Reading this decodes `this.event.data.custom_id` once and caches the result. On a handler
registered for several routes this is `never`. Use [`match`](/docs/packages/http/0.12.0/classes/autocomplete-handler#match) instead.

### route

```ts
protected readonly route: Defs[number]['prefix']
```

The matched custom-ID prefix, such as `approve`, without encoded params.

### sender

```ts
readonly sender: TSender
```

The reply surface for this interaction. Pass the handler to reply from outside its class.

### user

```ts
protected user: APIUser
```

The user who sent this interaction, read from `member.user` in a guild and `user` in a DM.

## Methods

### defer

```ts
protected async defer(opts?: DeferOpts): Promise<void>
```

Show a "thinking" placeholder, then fill it later with [`edit`](/docs/packages/http/0.12.0/classes/user-menu-handler#edit).

### deferUpdate

```ts
protected async deferUpdate(): Promise<void>
```

Acknowledge the component without changing the source message.

### delete

```ts
protected async delete(target?: TMessage): Promise<void>
```

Delete the initial reply or deferred placeholder. Pass a target to delete a message a prior send returned.

### edit

```ts
protected async edit(
    response: ReplyResponse<TNative> | string
): Promise<TMessage>
```

```ts
protected async edit(
    target: TMessage,
    response: ReplyResponse<TNative> | string
): Promise<TMessage>
```

Rewrite the initial reply or deferred placeholder. The targeted form rewrites a message a prior send returned.

### execute

```ts
abstract execute(): Promisable<void>
```

Holds the main logic of your handler. The dispatcher calls it after the handler's gates pass, so a
gate that refuses stops `execute()` from running.

### followUp

```ts
protected async followUp(
    response: ReplyResponse<TNative> | string,
    opts?: SendOpts
): Promise<TMessage>
```

Send a new message once the interaction is acknowledged.

### match

```ts
protected async match<Ret, Cases>(
    cases: OnlyCases<Cases, MatchCases<Defs, Ret>>
): Promise<MatchResult<Ret, Cases>>
```

Run the case for whichever route the component was minted from. Use this only when the handler is
registered for several routes. On a single-route handler, read `this.params` directly. On a multi-route
handler `this.params` is `never`, so match is the only way to read the decoded params.

Provide one case per registered route, keyed by its prefix, and each case receives that route's own
decoded params. The compiler checks that the cases cover every registered route prefix. `match`
decodes the wire before it runs a case.

### reply

```ts
protected async reply(
    response: ReplyResponse<TNative> | string,
    opts?: SendOpts
): Promise<TMessage>
```

Send the initial response, exactly once.

### send

```ts
protected async send(
    response: ReplyResponse<TNative> | string,
    opts?: SendOpts
): Promise<TMessage>
```

Routes to reply, followUp, or edit based on the current ack state.

### showModal

```ts
protected async showModal(
    this: InteractionHandler<
        Exclude<Repliables, APIModalSubmitInteraction>
    >,
    modal: ModalLike
): Promise<void>
```

Open a modal. Must be the initial response to this interaction. The modal kind rejects this call at
compile time (Discord forbids a modal in response to a modal).

### update

```ts
protected async update(
    response: ReplyResponse | string
): Promise<SentMessage>
```

Rewrite the source message this component interaction came from.