react-discord-presence

> (unofficial) <

Display your Discord presence.

yarn add react-discord-presence

Example

Check it out on StackBlitz.

Loading State

Error State

You can find more examples in docs/Examples.md.

Features

Self Contained
Banner
Avatar
User Online Status
User Status
Emojis
Badges (Boost badge will match premium_since)
About Me
Member Since (Mostly, icons are on the Roadmap)
Spotify
Activity
Customization

Please note that this component is only possible by the Lanyard API and the work done to get the correct data pulled into the display components.

Requirements

This solution uses the Lanyard API which will require the Discord user your displaying presence for to be in the Lanyard API Discord. You will also have to have "Developer Mode" on for the user.

If they're not in the Discord server, you'll get a response error from their API.

Usage

You can use the self contained DiscordPresence component which will handle data retrieval, loading, error, and display states automatically for you.

You can also use the discord-presence network widget/svg component instead.

React

import { DiscordPresence } from 'react-discord-presence';

// ...
<DiscordPresence args={{ developerId: "<your-developer-id>" }} />

Widget

<object data="https://discord-presence.netlify.app/render/<your-developer-id>">
  <embed src="https://discord-presence.netlify.app/render/<your-developer-id>"></embed>
</object>

SVG

<img src="https://discord-presence.netlify.app/render/svg/<your-developer-id>" />

Custom

For fine grained control see docs/Customization.md.

Development

Written in Typescript. Workflows are defined in .envrc.sh.

External Resources

Schema Lanyard API Discord Presence: Schema for the Lanyard API.
Lanyard API: REST and WS API that provides Discord presence data.
Discord CDN Alternative: REST API that provides Discord presence data.

Roadmap

"iframe" embed

Display

Update memberSince to use (developerId / 4194304 + 1420070400000) / 1000.
Modify Twemoji to use ErrorImage when the emoji image errors.
Support for overflow in activities & activity details? Should this be a custom scrollbar?
Find SVG badges for 'TeamPseudoUser', 'VerifiedBot', 'CertifiedModerator', 'BotHTTPInteractions', 'Spammer', and 'Quarantined'

Data

Support for realtime presence data with the web socket API.
Support for automated queries on an interval.
Support for custom maxDelay on call site.

Build

Flatten asset distributable output (CSS/Images/etc)

Contributions

Author	Estimated Hours
	34.3 Hours
	0.52 Hours