2023-10-31 20:14:57 +03:00
2023-10-28 19:49:36 +00:00
2023-09-27 12:23:56 -05:00
2022-01-09 17:36:42 -06:00
2021-12-29 14:36:54 -06:00
2023-08-16 19:32:28 -05:00
2022-04-25 14:52:04 -05:00
2022-07-22 13:51:02 -05:00
2023-10-10 10:50:15 -05:00
2022-01-09 17:40:15 -06:00
2023-10-31 20:14:57 +03:00
2022-01-12 09:55:03 -06:00
2023-08-16 19:32:28 -05:00
2023-08-16 19:32:28 -05:00
2023-08-16 19:32:28 -05:00

Reacord: Create interactive Discord messages using React

Installation ∙ npm

# npm
npm install reacord react discord.js

# yarn
yarn add reacord react discord.js

# pnpm
pnpm add reacord react discord.js

Get Started

Visit the docs to get started.

Example

import { useState } from "react"
import { Embed, EmbedField, Button } from "reacord"

interface EmbedCounterProps {
  count: number
  visible: boolean
}

function EmbedCounter({ count, visible }: EmbedCounterProps) {
  if (!visible) return <></>

  return (
    <Embed title="the counter">
      <EmbedField name="is it even?">{count % 2 ? "no" : "yes"}</EmbedField>
    </Embed>
  )
}

function Counter() {
  const [showEmbed, setShowEmbed] = useState<boolean>(false)
  const [count, setCount] = useState<number>(0)
  const instance = useInstance()

  return (
    <>
      this button was clicked {count} times
      <EmbedCounter count={count} visible={showEmbed} />
      <Button
        style="primary"
        label="clicc"
        onClick={() => setCount(count + 1)}
      />
      <Button
        style="secondary"
        label={showEmbed ? "hide embed" : "show embed"}
        onClick={() => setShowEmbed(!showEmbed)}
      />
      <Button
        style="danger"
        label="deactivate"
        onClick={() => instance.destroy()}
      />
    </>
  )
}

Counter demo

Languages
TypeScript 99.9%