From 4da5fad390b3e6593a6a7b5e3b39d915829a522c Mon Sep 17 00:00:00 2001 From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com> Date: Fri, 31 Dec 2021 15:10:50 -0600 Subject: [PATCH] copy markdiwn files to docs-new --- packages/docs-new/src/docs/buttons.md | 9 ++ packages/docs-new/src/docs/embeds.md | 9 ++ packages/docs-new/src/docs/getting-started.md | 44 ++++++++++ packages/docs-new/src/docs/select-menu.md | 8 ++ .../docs-new/src/docs/sending-messages.md | 87 +++++++++++++++++++ 5 files changed, 157 insertions(+) create mode 100644 packages/docs-new/src/docs/buttons.md create mode 100644 packages/docs-new/src/docs/embeds.md create mode 100644 packages/docs-new/src/docs/getting-started.md create mode 100644 packages/docs-new/src/docs/select-menu.md create mode 100644 packages/docs-new/src/docs/sending-messages.md diff --git a/packages/docs-new/src/docs/buttons.md b/packages/docs-new/src/docs/buttons.md new file mode 100644 index 0000000..e20136a --- /dev/null +++ b/packages/docs-new/src/docs/buttons.md @@ -0,0 +1,9 @@ +--- +order: 3 +title: Buttons +description: Using button components +--- + +# Buttons + +todo diff --git a/packages/docs-new/src/docs/embeds.md b/packages/docs-new/src/docs/embeds.md new file mode 100644 index 0000000..3ff694a --- /dev/null +++ b/packages/docs-new/src/docs/embeds.md @@ -0,0 +1,9 @@ +--- +order: 2 +title: Embeds +description: Using embed components +--- + +# Embeds + +todo diff --git a/packages/docs-new/src/docs/getting-started.md b/packages/docs-new/src/docs/getting-started.md new file mode 100644 index 0000000..5d5bb55 --- /dev/null +++ b/packages/docs-new/src/docs/getting-started.md @@ -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) +``` diff --git a/packages/docs-new/src/docs/select-menu.md b/packages/docs-new/src/docs/select-menu.md new file mode 100644 index 0000000..91e2420 --- /dev/null +++ b/packages/docs-new/src/docs/select-menu.md @@ -0,0 +1,8 @@ +--- +title: Select Menus +description: Using select menu components +--- + +# Select Menus + +todo diff --git a/packages/docs-new/src/docs/sending-messages.md b/packages/docs-new/src/docs/sending-messages.md new file mode 100644 index 0000000..e4efb16 --- /dev/null +++ b/packages/docs-new/src/docs/sending-messages.md @@ -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. + +
+ In case you're unaware, click here to see how to get a channel ID. + +1. Enable "Developer Mode" in your Discord client settings. + ![Enabling developer mode](/images/developer-mode.png) +1. Right click any channel, and select "Copy ID". +![Copying the channel ID](/images/copy-channel-id.png) +
+ +```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, ) +}) +``` + +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() + instance.render() +}) +``` + +## 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 + + + +todo