Options
All
  • Public
  • Public/Protected
  • All
Menu

reacord

Index

Core

Embed

Button

Link

Select

Action Row

Component Event

Other

Core

ReacordConfig

ReacordConfig: { maxInstances?: number }

Type declaration

  • Optional maxInstances?: number

    The max number of active instances. When this limit is exceeded, the oldest instances will be disabled.

ReacordInstance

ReacordInstance: { deactivate: any; destroy: any; render: any }

Represents an interactive message, which can later be replaced or deleted.

Type declaration

  • deactivate:function
    • deactivate(): void

    • Same as destroy, but keeps the message and disables the components on it. This prevents it from listening to user interactions.

      Returns void

  • destroy:function
    • destroy(): void

    • Remove this message

      Returns void

  • render:function
    • render(content: ReactNode): void

    • Render some JSX to this instance (edits the message)

      Parameters

      • content: ReactNode

      Returns void

useInstance

Embed

EmbedAuthorProps

EmbedAuthorProps: { children?: string; iconUrl?: string; name?: string; url?: string }

Type declaration

  • Optional children?: string
  • Optional iconUrl?: string
  • Optional name?: string
  • Optional url?: string

EmbedFieldProps

EmbedFieldProps: { children?: string; inline?: boolean; name: string; value?: string }

Type declaration

  • Optional children?: string
  • Optional inline?: boolean
  • name: string
  • Optional value?: string

EmbedFooterProps

EmbedFooterProps: { children?: string; iconUrl?: string; text?: string; timestamp?: string | number | Date }

Type declaration

  • Optional children?: string
  • Optional iconUrl?: string
  • Optional text?: string
  • Optional timestamp?: string | number | Date

EmbedImageProps

EmbedImageProps: { url: string }

Type declaration

  • url: string

EmbedProps

EmbedProps: { author?: { iconUrl?: string; name: string; url?: string }; children?: React.ReactNode; color?: number; description?: string; fields?: { inline?: boolean; name: string; value: string }[]; footer?: { iconUrl?: string; text: string }; image?: { url: string }; thumbnail?: { url: string }; timestamp?: string | number | Date; title?: string; url?: string; video?: { url: string } }
see

https://discord.com/developers/docs/resources/channel#embed-object

Type declaration

  • Optional author?: { iconUrl?: string; name: string; url?: string }
    • Optional iconUrl?: string
    • name: string
    • Optional url?: string
  • Optional children?: React.ReactNode
  • Optional color?: number
  • Optional description?: string
  • Optional fields?: { inline?: boolean; name: string; value: string }[]
  • Optional footer?: { iconUrl?: string; text: string }
    • Optional iconUrl?: string
    • text: string
  • Optional image?: { url: string }
    • url: string
  • Optional thumbnail?: { url: string }
    • url: string
  • Optional timestamp?: string | number | Date
  • Optional title?: string
  • Optional url?: string
  • Optional video?: { url: string }
    • url: string

EmbedThumbnailProps

EmbedThumbnailProps: { url: string }

Type declaration

  • url: string

EmbedTitleProps

EmbedTitleProps: { children: string; url?: string }

Type declaration

  • children: string
  • Optional url?: string

Embed

EmbedAuthor

  • Parameters

    Returns Element

EmbedField

  • Parameters

    Returns Element

EmbedFooter

  • Parameters

    Returns Element

EmbedImage

  • Parameters

    Returns Element

EmbedThumbnail

  • Parameters

    Returns Element

EmbedTitle

  • Parameters

    Returns Element

Button

ButtonClickEvent

ButtonClickEvent: ComponentEvent

ButtonProps

ButtonProps: ButtonSharedProps & { style?: "primary" | "secondary" | "success" | "danger"; onClick: any }

ButtonSharedProps

ButtonSharedProps: { disabled?: boolean; emoji?: string; label?: string }

Common props between button-like components

Type declaration

  • Optional disabled?: boolean

    When true, the button will be slightly faded, and cannot be clicked.

  • Optional emoji?: string

    Renders an emoji to the left of the text. Has to be a literal emoji character (e.g. 🍍), or an emoji code, like <:plus_one:778531744860602388>.

    To get an emoji code, type your emoji in Discord chat with a backslash \ in front. The bot has to be in the emoji's guild to use it.

  • Optional label?: string

    The text on the button. Rich formatting (markdown) is not supported here.

Button

  • Parameters

    Returns Element

Link

LinkProps

LinkProps: ButtonSharedProps & { children?: string; url: string }

Link

  • Parameters

    Returns Element

Select

OptionProps

OptionProps: { children?: string; description?: string; emoji?: string; label?: string; value: string }

Type declaration

  • Optional children?: string

    The text shown to the user

  • Optional description?: string

    Description for the option, shown to the user

  • Optional emoji?: string

    Renders an emoji to the left of the text.

    Has to be a literal emoji character (e.g. 🍍), or an emoji code, like <:plus_one:778531744860602388>.

    To get an emoji code, type your emoji in Discord chat with a backslash \ in front. The bot has to be in the emoji's guild to use it.

  • Optional label?: string

    The text shown to the user. This takes priority over children

  • value: string

    The internal value of this option

SelectChangeEvent

SelectChangeEvent: ComponentEvent & { values: string[] }

SelectProps

SelectProps: { children?: ReactNode; disabled?: boolean; maxValues?: number; minValues?: number; multiple?: boolean; placeholder?: string; value?: string; values?: string[]; onChange?: any; onChangeMultiple?: any; onChangeValue?: any }

Type declaration

  • Optional children?: ReactNode
  • Optional disabled?: boolean

    When true, the select will be slightly faded, and cannot be interacted with.

  • Optional maxValues?: number

    With multiple, the maximum number of values that can be selected. When multiple is false or not defined, this is always 1.

    This only limits the number of values that can be received by the user. This does not limit the number of values that can be displayed by you.

  • Optional minValues?: number

    With multiple, the minimum number of values that can be selected. When multiple is false or not defined, this is always 1.

    This only limits the number of values that can be received by the user. This does not limit the number of values that can be displayed by you.

  • Optional multiple?: boolean

    Set to true to allow multiple selected values

  • Optional placeholder?: string

    The text shown when no value is selected

  • Optional value?: string

    Sets the currently selected value

  • Optional values?: string[]

    Sets the currently selected values, for use with multiple

  • onChange?:function

    • Called when the user inputs a selection. Receives the entire select change event, which can be used to create new replies, etc.

      Parameters

      Returns void

  • onChangeMultiple?:function

    • Convenience shorthand for onChange, which receives all selected values.

      Parameters

      Returns void

  • onChangeValue?:function

    • Convenience shorthand for onChange, which receives the first selected value.

      Parameters

      Returns void

Option

  • Parameters

    Returns Element

Select

Action Row

ActionRowProps

ActionRowProps: { children?: ReactNode }

Props for an action row

Type declaration

  • Optional children?: ReactNode

ActionRow

  • An action row is a top-level container for message components.

    You don't need to use this; Reacord automatically creates action rows for you. But this can be useful if you want a specific layout.

    // put buttons on two separate rows
    <ActionRow>
      <Button label="First" onClick={handleFirst} />
    </ActionRow>
    <Button label="Second" onClick={handleSecond} />
    see

    https://discord.com/developers/docs/interactions/message-components#action-rows

    Parameters

    Returns Element

Component Event

ChannelInfo

ChannelInfo: { id: string; lastMessageId?: string; name?: string; nsfw?: boolean; ownerId?: string; parentId?: string; rateLimitPerUser?: number; topic?: string }

Type declaration

  • id: string
  • Optional lastMessageId?: string
  • Optional name?: string
  • Optional nsfw?: boolean
  • Optional ownerId?: string
  • Optional parentId?: string
  • Optional rateLimitPerUser?: number
  • Optional topic?: string

ComponentEvent

ComponentEvent: { channel: ChannelInfo; guild?: GuildInfo; message: MessageInfo; user: UserInfo; ephemeralReply: any; reply: any }

Type declaration

GuildInfo

GuildInfo: { id: string; member: GuildMemberInfo; name: string }

Type declaration

GuildMemberInfo

GuildMemberInfo: { avatarUrl?: string; color: number; communicationDisabledUntil?: string; displayAvatarUrl: string; displayName: string; id: string; joinedAt?: string; nick?: string; pending?: boolean; premiumSince?: string; roles: string[] }

Type declaration

  • Optional avatarUrl?: string
  • color: number
  • Optional communicationDisabledUntil?: string
  • displayAvatarUrl: string
  • displayName: string
  • id: string
  • Optional joinedAt?: string
  • Optional nick?: string
  • Optional pending?: boolean
  • Optional premiumSince?: string
  • roles: string[]

MessageInfo

MessageInfo: { authorId: UserInfo; channelId: string; content: string; editedTimestamp?: string; id: string; member?: GuildMemberInfo; mentionEveryone: boolean; mentions: string[]; timestamp: string; tts: boolean }

Type declaration

  • authorId: UserInfo
  • channelId: string
  • content: string
  • Optional editedTimestamp?: string
  • id: string
  • Optional member?: GuildMemberInfo
  • mentionEveryone: boolean
  • mentions: string[]

    The IDs of mentioned users

  • timestamp: string
  • tts: boolean

UserInfo

UserInfo: { accentColor?: number; avatarUrl: string; discriminator: string; id: string; tag: string; username: string }

Type declaration

  • Optional accentColor?: number
  • avatarUrl: string
  • discriminator: string
  • id: string
  • tag: string
  • username: string

Generated using TypeDoc