Widget for Discord Presence

Gravatar Profile nate-wilkins@code-null.com
Nate-Wilkins
2 min read
Nov 8, 2024

If you use Discord you'll know that you can customize your profile in a contained widget/box of sorts.

Wouldn't it also be cool if you could display similar customizations on your web application?

Repository

Example

Widget for React Discord Presence

Usage

React

1import { DiscordPresence } from 'react-discord-presence';
2
3// ...
4<DiscordPresence args={{ developerId: "<your-developer-id>" }} />

Structure

The

README.md
will tell you the high level of what the widget does and what it looks like in different states.

However, the cool part is this JSX in

DiscordPresence.tsx
where the structure reads like a fluent DSL.

  • Theme: Change the colors and stuff.

  • Boundary: Handle loading/error states. Uses

    Suspense
    .

  • Accessor: Request Discord Presence data (via Lanyard API). Hooks into

    Boundary
    .

  • Display: Render Discord Presence data. No external data dependencies.

1<ThemeDiscordPresence
2  classes={classes}
3  theme={
4    theme
5      ? theme
6      : {
7          primary: '#36393f',
8          accent: '#2f3136',
9        }
10  }
11>
12  <Boundary
13    onLoading={<LoadingDiscordPresence />}
14    onError={({ error }) => <ErrorDiscordPresence error={error} />}
15  >
16    <AccessorGetDiscordPresence cache={() => cacheStore} args={args}>
17      {({ data: dataAccessor }) =>
18        !dataAccessor || !dataAccessor.discord_user ? (
19          // Should never happen.
20          <ErrorDiscordPresence error="Unknown Error." />
21        ) : (
22          <ThemeDiscordPresenceOverride
23            theme={data && data.theme ? data.theme : dataAccessor.theme}
24          >
25            <DisplayDiscordPresence
26              data={{
27                ...dataAccessor,
28                ...data,
29              }}
30              formatActivityDuration={formatActivityDuration}
31              formatAvatarImageSrc={formatAvatarImageSrc}
32              formatBannerImageSrc={formatBannerImageSrc}
33            />
34          </ThemeDiscordPresenceOverride>
35        )
36      }
37    </AccessorGetDiscordPresence>
38  </Boundary>
39</ThemeDiscordPresence>

Storybook

To see all the components in a more visual interactive interface you can launch storybook.

Roadmap

  • Create embed site so it works on any "framework".