react-discord-presence v15.0.0
react-discord-presence
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.
Make sure to load up a supported font before rendering the component.
Inter
is used by default.
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
</style>
React
import { DiscordPresence, } from 'react-discord-presence';
import DiscordPresenceClassesDefault from 'react-discord-presence/dist/src/display/style/DiscordPresenceDefault.module.css';
// ...
<DiscordPresence
classes={DiscordPresenceClassesDefault}
args={{ developerId: "<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
Display
- Modify Twemoji to use
ErrorImage
when the emoji image errors. - Modify loading images to use
ErrorImage
when the badge 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 |
---|---|
30.18 Hours |
9 months ago
9 months ago
9 months ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago