@gungnir/react NPM

Gungnir React (WIP)

A custom React renderer to easily create interactive responses using Gungnir.

Install

npm install @gungnir/react

Usage

import { Message, Embed, Field, FieldName, FieldValue, Reaction } from "@gungnir/react";
import { useState, useCallback } from "react";
import { Command } from "@gungnir/core";

function Counter() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => setCount(count => count+1), []);
  const decrement = useCallback(() => setCount(count => count-1), []);

  return <>
    <Message>Counting!</Message>
    <Embed>
      <Field>
        <FieldName>Current count</FieldName>
        <FieldValue>{count}</FieldValue>
      </Field>
    </Embed>
    <Reaction emoji="⬅️" onClick={decrement}/>
    <Reaction emoji="➡️" onClick={increment}/>
  </>;
}

@Command.define("counter")
export class CounterCommand extends Command {
  public run(ctx: Command.Context) {
    return ctx.jsx(<Counter/>);
  }
}

Components

`<Message>`

Simplest component, simply returns a Message.

const message = await ctx.jsx(<Message>This is my message</Message>);
console.log(message.content); // "This is my message"

`<Reaction>`

Appends a reaction to a message, can also listen to the onClick, onAdd and onRemove events.\ See the counter example.

`<Embed>`

This component is used to return an embed.

<Embed color="669900"></Embed>

`<Author>`

Set the author field in an embed.

<Embed>
  <Author iconURL="iconURL" url="url">I am the author</Author>
</Embed>

`<Thumbnail>`

Set the thumbnail of an embed. (top right image)

<Embed>
  <Thumbnail url="url"/>
</Embed>

`<Title>`

Set the description field in an embed.

<Embed>
  <Title url="url">Title field</Title>
</Embed>

`<Description>`

Set the description field in an embed.

<Embed>
  <Description>Description field</Description>
</Embed>

`<Field>`

Add a field to the embed.

<Embed>
  <Field inline>
    <FieldName>Field name</FieldName>
    <FieldValue>Field value</FieldValue>
  </Field>
</Embed>

`<Image>`

Set the image of an embed. (bottom)

<Embed>
  <Image url="url"/>
</Embed>

`<Footer>`

Attach a file to the embed.

<Embed>
  <Footer iconURL="iconURL">Footer field</Footer>
</Embed>

`<Timestamp>`

Set the timestamp field in an embed.

<Embed>
  <Timestamp time="1619189218000"/>
</Embed>

`<File>`

Attach a file to the embed.

<Embed>
  <File file="file"></File>
</Embed>

Hooks

`useClient`

Returns the client.

function CustomEmbed(props: {children: Elements}) {
  const client = useClient();

  const avatarURL = client.user.displayAvatarURL({
    format: "png",
    dynamic: true
  });

  return (
    <Embed>
      <>{props.children}</>
      <Footer iconURL={avatarURL}>client.user.username</Footer>
    </Embed>
  )
}

`useChannel`

Returns the channel where the message is posted.

`useGuild`

Returns the guild where the channel is posted.

`useMessage`

Rerenders the component once the message has been posted.

function Ping() {
  const msg = useMessage() // Message | null;
  const now = useRef(Date.now()).current;
  
  if (msg) {
    return <Message>Pong! ({Date.now() - now}ms)</Message>;
  } else {
    return <Message>Pong!</Message>;
  }
}

`useTrackUser`

Rerenders the component when the user passed as a parameter is updated.\ Disables itself after the specified duration.

function UserAvatar(props: {user: User}) {
  useTrackUser(props.user, 300000); // will disable itself after 5 minutes
  
  const avatarURL = props.user.displayAvatarURL({
    format: "png",
    size: 4096,
    dynamic: true
  });

  return <Image url={avatarURL}/>;
}