15.0.0 • Published 9 months ago

react-discord-presence v15.0.0

Weekly downloads
-
License
Apache-2.0
Repository
-
Last release
9 months ago

react-discord-presence

Version Open Issues License

Display your Discord presence.

yarn add react-discord-presence

Example

Check it out on StackBlitz.

Screenshot React Discord Presence

Loading State

Screenshot Loading React Discord Presence

Error State

Screenshot Loading React Discord Presence

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

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

AuthorEstimated Hours
nate-wilkins30.18 Hours
15.0.0

9 months ago

14.0.0

9 months ago

13.0.0

9 months ago

12.0.0

2 years ago

11.0.0

2 years ago

10.12.0

2 years ago

10.11.0

2 years ago

10.10.8

2 years ago

10.10.7

2 years ago

10.10.6

2 years ago

10.10.5

2 years ago

10.10.4

2 years ago

10.10.3

2 years ago

10.10.2

2 years ago

10.10.1

2 years ago

10.10.0

2 years ago

10.9.0

2 years ago

10.8.2

2 years ago

10.8.1

2 years ago

10.8.0

2 years ago

10.6.0

2 years ago

10.5.0

2 years ago

10.4.0

2 years ago

10.3.0

2 years ago

10.2.0

2 years ago

10.1.0

2 years ago

10.0.3

2 years ago

10.0.2

2 years ago

10.0.1

2 years ago

9.0.0

2 years ago

8.0.0

2 years ago

7.0.0

2 years ago

6.0.2

2 years ago

6.0.1

2 years ago

6.0.0

2 years ago

5.0.0

2 years ago

4.0.0

2 years ago

2.0.0

2 years ago

1.1.0

2 years ago

1.0.0

2 years ago

0.8.0

2 years ago

0.7.0

2 years ago

0.5.0

2 years ago

0.4.0

2 years ago

0.3.0

2 years ago

0.2.0

2 years ago

0.1.0

2 years ago