Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/twlite/discord.tsx
Create Discord.js components in JSX
https://github.com/twlite/discord.tsx
babel buttons components discord discord-components-tsx discordjs hacktoberfest jsx react tsx typescript
Last synced: 17 days ago
JSON representation
Create Discord.js components in JSX
- Host: GitHub
- URL: https://github.com/twlite/discord.tsx
- Owner: twlite
- Created: 2021-06-05T13:30:41.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-16T11:36:13.000Z (almost 3 years ago)
- Last Synced: 2024-10-03T07:05:29.462Z (about 1 month ago)
- Topics: babel, buttons, components, discord, discord-components-tsx, discordjs, hacktoberfest, jsx, react, tsx, typescript
- Language: TypeScript
- Homepage: https://archaeopteryx1.github.io/discord.tsx
- Size: 20.5 KB
- Stars: 20
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# discord.tsx
Create Discord.js components in JSX.
**[https://www.npmjs.com/package/discord.tsx](https://www.npmjs.com/package/discord.tsx)**
# Setup
## Install discord.js
```sh
$ npm i discord.js
```
# Env Setup
## TypeScript
### Add these in your **`tsconfig.json`#compilerOptions**
```json
"jsxFactory": "DiscordComponents.createComponent",
"jsx": "react",
"jsxFragmentFactory": "DiscordComponents.Fragment"
```
## Babel
Specify pragma for custom jsx factory with **[`@babel/plugin-transform-react-jsx`](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx)**.
```jsx
/** @jsx DiscordComponents.createComponent */
/** @jsxFrag DiscordComponents.Fragment */
```
# Components Available
- MessageButton
- MessageSelectMenu
- MessageEmbed
## Root Fragment Data
Root fragment: `<>...>` returns `{ embeds: MessageEmbed[], components: MessageActionRow[] }`.
# Example
## Single Row
```tsx
import {
DiscordComponents,
MessageActionRow,
MessageButton,
} from "discord.tsx";
client.on("messageCreate", (message) => {
if (message.content === "=btn") {
const componentData = (
<>
>
);
return message.channel.send({ ...componentData, content: "Buttons 🖱" });
}
});
```
### Preview
## Or Multiple
```tsx
import {
DiscordComponents,
MessageActionRow,
MessageButton,
} from "discord.tsx";
client.on("messageCreate", (message) => {
if (message.content === "=btn") {
const componentData = (
<>
>
);
return message.channel.send({ ...componentData, content: "Buttons 🖱" });
}
});
```
### Preview
## Select Menu
```tsx
import {
DiscordComponents,
MessageActionRow,
MessageSelectMenu,
MessageSelectOption
} from "discord.tsx";
client.on("messageCreate", (message) => {
if (message.content === "=select") {
const componentData = (
<>
>
);
return message.channel.send({ ...componentData, content: "Select It" });
}
});
```
### Preview
## Message Embed
```tsx
import {
DiscordComponents,
MessageEmbed,
MessageEmbedAuthor,
MessageEmbedFields,
MessageEmbedField,
MessageEmbedFooter,
MessageEmbedImage,
MessageEmbedThumbnail
} from "discord.tsx";
client.on("messageCreate", (message) => {
if (message.content === "=embed") {
const componentData = (
<>
>
);
return message.channel.send(componentData);
}
});
```
### Preview
## Other examples
```tsx
const componentData = (
<>
{Array.from({ length: 5 }, (_, i) => (
))}
{Array.from({ length: 5 }, (_, i) => (
))}
{Array.from({ length: 10 }, (_, i) => {
const counter = ++i;
return
})}
>
);
return message.channel.send(componentData);
```