JSX

You can create embeds, buttons, modals, and more using a JSX syntax. You can find the documentation here.

@reciple/jsx

To use JSX, you need to have @reciple/jsx installed in your project. This package contains all the components and runtime for JSX. If you don’t have @reciple/jsx installed, you can install it using:

npm i @reciple/jsx

In your build config, you must set the react-jsx as your jsx, and set @reciple/jsx as your jsxImportSource. This will allow reciple JSX to work in your project. In your tsconfig.json, you can set the following:

{
  "compilerOptions": {
    ...
    "jsx": "react-jsx",
    "jsxImportSource": "@reciple/jsx"
  }
}

Now, when you build your project, whenever you use JSX, reciple JSX will be used.

Components

You can find all the components in the reciple JSX documentation.

Embeds

import { Embed, EmbedAuthor, EmbedDescription, EmbedFields, EmbedField, EmbedFooter, EmbedImage, EmbedThumbnail, EmbedTitle } from '@reciple/jsx';

await channel.send({
  embeds: [
    <Embed color="Green" timestamp={Date.now()}>
      <EmbedAuthor name="Embed Author" iconURL="https://avatars.githubusercontent.com/u/69035887?v=4"/>
      <EmbedTitle>Embed Title</EmbedTitle>
      <EmbedDescription>Embed Description</EmbedDescription>
      <EmbedThumbnail url="https://avatars.githubusercontent.com/u/69035887?v=4"/>
      <EmbedImage url="https://avatars.githubusercontent.com/u/69035887?v=4"/>
      <EmbedFields>
        <EmbedField name="Field" inline={true}>
          Value
        </EmbedField>
      </EmbedFields>
      <EmbedFooter text="Embed Footer" iconURL="https://avatars.githubusercontent.com/u/69035887?v=4"/>
    </Embed>
  ]
})

Buttons

import { ActionRow, Button } from '@reciple/jsx';
import { ButtonStyle } from 'discord.js';

await channel.send({
  components: [
    <ActionRow>
      <Button customId="my-button-1" style={ButtonStyle.Primary}>Primary</Button>
      <Button customId="my-button-2" style={ButtonStyle.Secondary}>Secondary</Button>
      <Button customId="my-button-3" style={ButtonStyle.Success}>Success</Button>
      <Button customId="my-button-4" style={ButtonStyle.Danger}>Danger</Button>
      <Button customId="my-button-5" style={ButtonStyle.Premium}>Premium</Button>
      <Button url="https://google.com" style={ButtonStyle.Link}>Link</Button>
    </ActionRow>
  ]
})

Select Menus

import { ActionRow, StringSelectMenu, RoleSelectMenu, ChannelSelectMenu, UserSelectMenu } from '@reciple/jsx';
import { ChannelType } from 'discord.js';

await channel.send({
  components: [
    <ActionRow>
      <StringSelectMenu customId="my-select-menu-1">
        <StringSelectMenuOption value="option-1" emoji="👍" description="Hello, world">
          Option
        </StringSelectMenuOption>
      </StringSelectMenu>
      <RoleSelectMenu customId="my-select-menu-2"/>
      <ChannelSelectMenu customId="my-select-menu-3"/>
      <UserSelectMenu customId="my-select-menu-4" channelTypes={[ChannelType.GuildText]} />
    </ActionRow>
  ]
})

Polls

import { Poll, PollQuestionMedia, PollAnswers, PollAnswer } from '@reciple/jsx';

await channel.send({
  components: [
    <Poll duration={1000 * 60 * 60 * 24} allowMultiselect={true}>
      <PollQuestionMedia>Poll Question</PollQuestionMedia>
      <PollAnswers>
        <PollAnswer emoji="✅">Yes</PollAnswer>
        <PollAnswer emoji="❌">No</PollAnswer>
      </PollAnswers>
    </Poll>
  ]
})

Modals

import { Modal, Label, TextInput, FileUpload } from '@reciple/jsx';
import { TextInputStyle } from 'discord.js';

await interaction.showModal(
  <Modal customId="my-modal" title="This is a modal rawr">
    <Label label="My Input" description="This is an example input">
      <TextInput customId="my-input" style={TextInputStyle.Short}/>
    </Label>
    <Label label="My Paragraph" description="This is an example paragraph input">
      <TextInput customId="my-paragraph" style={TextInputStyle.Paragraph}/>
    </Label>
    <Label label="My File" description="This is an example file upload">
      <FileUpload customId="my-file-upload" maxValues={3} required={false}/>
    </Label>
  </Modal>
)

See implementation in modal.tsx

Components v2

import { TextDisplay, Separator, File } from '@reciple/jsx';
import { AttachmentBuilder } from 'discord.js';

await channel.send({
  flags: ['IsComponentsV2'],
  components: <>
    <TextDisplay># Title Display</TextDisplay>
    <TextDisplay>Lorem ipsum dolor sit amet consectetur adipiscing elit.</TextDisplay>
    <Separator/>
    <File url="attachment://file.png"/>
  </>,
  files: [
    new AttachmentBuilder('path/to/file.png', { name: 'file.png' })
  ]
})

Title Display

Lorem ipsum dolor sit amet consectetur adipiscing elit.

---