copy markdiwn files to docs-new
This commit is contained in:
9
packages/docs-new/src/docs/buttons.md
Normal file
9
packages/docs-new/src/docs/buttons.md
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
---
|
||||||
|
order: 3
|
||||||
|
title: Buttons
|
||||||
|
description: Using button components
|
||||||
|
---
|
||||||
|
|
||||||
|
# Buttons
|
||||||
|
|
||||||
|
todo
|
||||||
9
packages/docs-new/src/docs/embeds.md
Normal file
9
packages/docs-new/src/docs/embeds.md
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
---
|
||||||
|
order: 2
|
||||||
|
title: Embeds
|
||||||
|
description: Using embed components
|
||||||
|
---
|
||||||
|
|
||||||
|
# Embeds
|
||||||
|
|
||||||
|
todo
|
||||||
44
packages/docs-new/src/docs/getting-started.md
Normal file
44
packages/docs-new/src/docs/getting-started.md
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
---
|
||||||
|
order: 0
|
||||||
|
meta:
|
||||||
|
title: Getting Started
|
||||||
|
description: Learn how to get started with Reacord.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Getting Started
|
||||||
|
|
||||||
|
This guide assumes some familiarity with JavaScript, [React](https://reactjs.org), [Discord.js](https://discord.js.org) and the [Discord API](https://discord.dev). Keep these pages as reference if you need it.
|
||||||
|
|
||||||
|
**Note:** Ensure your project has support for running code with JSX. I recommend using [esno](https://npm.im/esno).
|
||||||
|
|
||||||
|
## Install
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# npm
|
||||||
|
npm install reacord discord.js
|
||||||
|
|
||||||
|
# yarn
|
||||||
|
yarn add reacord discord.js
|
||||||
|
|
||||||
|
# pnpm
|
||||||
|
pnpm add reacord discord.js
|
||||||
|
```
|
||||||
|
|
||||||
|
## Setup
|
||||||
|
|
||||||
|
Create a Discord.js client and a Reacord instance:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// main.js
|
||||||
|
import { Client } from "discord.js"
|
||||||
|
import { ReacordDiscordJs } from "reacord"
|
||||||
|
|
||||||
|
const client = new Client()
|
||||||
|
const reacord = new ReacordDiscordJs(client)
|
||||||
|
|
||||||
|
client.on("ready", () => {
|
||||||
|
console.log("Ready!")
|
||||||
|
})
|
||||||
|
|
||||||
|
await client.login(process.env.BOT_TOKEN)
|
||||||
|
```
|
||||||
8
packages/docs-new/src/docs/select-menu.md
Normal file
8
packages/docs-new/src/docs/select-menu.md
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
---
|
||||||
|
title: Select Menus
|
||||||
|
description: Using select menu components
|
||||||
|
---
|
||||||
|
|
||||||
|
# Select Menus
|
||||||
|
|
||||||
|
todo
|
||||||
87
packages/docs-new/src/docs/sending-messages.md
Normal file
87
packages/docs-new/src/docs/sending-messages.md
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
---
|
||||||
|
order: 1
|
||||||
|
title: Sending Messages
|
||||||
|
description: Sending messages by creating Reacord instances
|
||||||
|
---
|
||||||
|
|
||||||
|
# Sending Messages with Instances
|
||||||
|
|
||||||
|
You can send messages via Reacord to a channel like so.
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary>In case you're unaware, click here to see how to get a channel ID.</summary>
|
||||||
|
|
||||||
|
1. Enable "Developer Mode" in your Discord client settings.
|
||||||
|

|
||||||
|
1. Right click any channel, and select "Copy ID".
|
||||||
|

|
||||||
|
</details>
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const channelId = "abc123deadbeef"
|
||||||
|
|
||||||
|
client.on("ready", () => {
|
||||||
|
reacord.send(channelId, "Hello, world!")
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
The `.send()` function creates a **Reacord instance**. You can pass strings, numbers, or anything that can be rendered by React, such as JSX!
|
||||||
|
|
||||||
|
Components rendered through this instance can include state and effects, and the message on Discord will update automatically.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
function Uptime() {
|
||||||
|
const [startTime] = useState(Date.now())
|
||||||
|
const [currentTime, setCurrentTime] = useState(Date.now())
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
currentTime(Date.now())
|
||||||
|
}, 3000)
|
||||||
|
return () => clearInterval(interval)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return <>this message has been shown for {currentTime - startTime}ms</>
|
||||||
|
}
|
||||||
|
|
||||||
|
client.on("ready", () => {
|
||||||
|
reacord.send(channelId, <Uptime />)
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
The instance can be rendered to multiple times, which will update the message each time.
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const Hello = ({ subject }) => <>Hello, {subject}!</>
|
||||||
|
|
||||||
|
client.on("ready", () => {
|
||||||
|
const instance = reacord.send(channel)
|
||||||
|
instance.render(<Hello subject="World" />)
|
||||||
|
instance.render(<Hello subject="Moon" />)
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Cleaning Up Instances
|
||||||
|
|
||||||
|
If you no longer want to use the instance, you can clean it up in a few ways:
|
||||||
|
|
||||||
|
- `instance.destroy()` - This will remove the message.
|
||||||
|
- `instance.deactivate()` - This will keep the message, but it will disable the components on the message, and no longer listen to user interactions.
|
||||||
|
|
||||||
|
By default, Reacord has a max limit on the number of active instances, and deactivates older instances to conserve memory. This can be configured through the Reacord options:
|
||||||
|
|
||||||
|
```js
|
||||||
|
const reacord = new ReacordDiscordJs(client, {
|
||||||
|
// after sending four messages,
|
||||||
|
// the first one will be deactivated
|
||||||
|
maxInstances: 3,
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
## Discord Slash Commands
|
||||||
|
|
||||||
|
<aside className="opacity-75 italic">
|
||||||
|
This section also applies to other kinds of application commands, such as context menu commands.
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
todo
|
||||||
Reference in New Issue
Block a user