> For the complete documentation index, see [llms.txt](https://camposcodes.gitbook.io/easediscordjs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://camposcodes.gitbook.io/easediscordjs/tools/interactionhandler.md).

# InteractionHandler

The InteractionHandler is responsible for receiving interactions, making it an important part of the system's core.

Usage:

```javascript
import { ApplicationCommandType } from "discord.js";
import { CreateRow, CreateButton, InteractionHandler} from "ease-discord-js";

export default {
    name: "test",
    description: "command to test the library",
    type: ApplicationCommandType.ChatInput,

    run: async(client, interaction) => {
       return interaction.reply({content: "Hello World!", components: [
            new CreateRow([
                new CreateButton({label: "Primary", style: "Primary", customId: "on_click_button"}),
            ])
        ]});
    }
}

new InteractionHandler({
    customId: "on_click_button",
    run: async(interaction) => {
        return interaction.reply({content: "Primary Button Clicked!", ephemeral: true});
    }
})
```

In the code above, we create a button and define the InteractionHandler with the same customId as the button. Therefore, when the button is pressed, it will call the "run" function defined within the InteractionHandler.\
\
Result:

<figure><img src="https://cdn.discordapp.com/attachments/1225958170732793898/1238313019310866535/image.png?ex=663f7d1e&#x26;is=663e2b9e&#x26;hm=34ab570893ef0748bb4f456255bb67f4f013659bc7b30531582fe6b24761a8ce&#x26;" alt=""><figcaption></figcaption></figure>

The InteractionHandler works for any components, as they all have a customId, and will therefore be called by the InteractionHandler.

## Passing parameters:

The InteractionHandler also allows passing parameters to the callback in an extremely simplified manner. The following code demonstrates its usage.

```javascript
import { ApplicationCommandType } from "discord.js";
import { CreateRow, CreateButton, InteractionHandler } from "ease-discord-js";

export default {
    name: "test",
    description: "command to test the library",
    type: ApplicationCommandType.ChatInput,

    run: async(client, interaction) => {
       return interaction.reply({content: "Hello World!", components: [
            new CreateRow([
                new CreateButton({customId: "on_click_button:blue:primary", label: "Primary", style: "Primary"}),
                new CreateButton({customId: "on_click_button:red:danger", label: "Danger", style: "Danger"})
            ])
        ]});
    }
}

new InteractionHandler({
    customId: "on_click_button",
    useParams: true, // using this will pass the color and style as parameters to the callback function. You can also use this to pass other data

    callback: async (client, interaction, color, style) => {
        return interaction.reply({content: `You clicked the **${style}** button with the color **${color}**`, ephemeral: true});
    }
})
```

In the code above, we see that the customId of the button is divided by ":" which separates the parameters for the InteractionHandler's callback. Therefore, in the InteractionHandler, you can define names for these parameters (in the example above, they are defined as color and style), and the response depends on these parameters as shown in the result below:

<figure><img src="https://cdn.discordapp.com/attachments/1225958170732793898/1238317048124411934/image.png?ex=663f80df&#x26;is=663e2f5f&#x26;hm=bd391821e5595f470fa2119ff86843113193bf0a3cb1921e130c3062a179e981&#x26;" alt=""><figcaption></figcaption></figure>

Simple, right? The next topic will show another way to receive interactions, this time by passing a function directly to the component.