https://github.com/luke265/discord-button-width

Make your discord buttons almost equal width
https://github.com/luke265/discord-button-width

discord discord-bot discord-js discordjs

Last synced: 20 days ago
JSON representation

Make your discord buttons almost equal width

• Host: GitHub
• URL: https://github.com/luke265/discord-button-width
• Owner: Luke265
• License: mit
• Created: 2022-04-03T13:09:13.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-12T16:47:26.000Z (9 months ago)
• Last Synced: 2025-01-11T19:13:15.334Z (20 days ago)
• Topics: discord, discord-bot, discord-js, discordjs
• Language: TypeScript
• Homepage:
• Size: 114 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# About

Make your [discord buttons](https://discord.com/developers/docs/interactions/message-components) almost equal width.



  



# Installation

```

npm i discord-button-width

yarn add discord-button-width

pnpm i discord-button-width

```

# Example usage

```ts

import { MessageActionRowComponentResolvable, MessageButtonOptions } from "discord.js";

import { getStringWidth, padStringToWidth } from "discord-button-width";

const buttons: MessageButtonOptions[] = [

    {

        customId: "1",

        type: "BUTTON",

        style: "PRIMARY",

        label: "Eastern White Pine",

    },

    {

        customId: "2",

        type: "BUTTON",

        style: "PRIMARY",

        label: "Daffodil",

    },

    {

        customId: "3",

        type: "BUTTON",

        style: "PRIMARY",

        label: "Dawn Redwood",

    },

    {

        customId: "4",

        type: "BUTTON",

        style: "PRIMARY",

        label: "Dark Opal Basil",

    },

    {

        customId: "5",

        type: "BUTTON",

        style: "PRIMARY",

        label: "Gerber",

    },

    {

        customId: "6",

        type: "BUTTON",

        style: "PRIMARY",

        label: "Incrediball Hydrangea",

    },

    {

        customId: "7",

        type: "BUTTON",

        style: "PRIMARY",

        label: "Pale Purple Coneflower",

    },

    {

        customId: "8",

        type: "BUTTON",

        style: "PRIMARY",

        label: "Lamb's Ear",

    },

    {

        customId: "9",

        type: "BUTTON",

        style: "PRIMARY",

        label: "Nasturtium",

    },

];

const maxWidth = Math.max(

    ...buttons.map((button) => getStringWidth(button.label!))

);

for (const button of buttons) {

    button.label = padStringToWidth(button.label!, maxWidth, Align.LEFT);

}

message.reply({

    components: [

        {

            type: "ACTION_ROW",

            components: buttons.slice(0, 3) as MessageActionRowComponentResolvable[],

        },

        {

            type: "ACTION_ROW",

            components: buttons.slice(3, 6) as MessageActionRowComponentResolvable[],

        },

        {

            type: "ACTION_ROW",

            components: buttons.slice(6, 9) as MessageActionRowComponentResolvable[],

        },

    ],

});

```

# Supported characters

Currently this library supports these characters: 

```

abcdefghijklmnopqrstuvwxyząčęėįšųūžABCDEFGHIJKLMNOPQRSTUVWXYZĄČĘĖĮŠŲŪŽ0123456789/*-,._?!#@$%^&=<>\\|/\"';:{}[]()`~\u0020

```

If you want to use other characters you can submit a pull request, or extend character map for yourself:

```ts

import { DiscordButtonWidthUtil, CHAR_MAP, PAD_MAP } from "discord-button-width";

const charMap = Object.assign(CHAR_MAP, {

  "A": 9.5

  // character: character width

});

const dcButton = new DiscordButtonWidthUtil(charMap, PAD_MAP);

dcButton.padStringToWidth("Your text", 60);

```