Display your discord presence in react.

Overview

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 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.

React

import { DiscordPresence } from 'react-discord-presence';
import discordPresenceClasses from 'react-discord-presence/dist/src/display/style/DiscordPresenceDefault.module.css';
// ...
<DiscordPresence
  classes={discordPresenceClasses}
  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

  • NPM package should have dist and README only.
  • Support for idle status.
  • Support for do not disturb status.
  • Fix "About Me" to support "`" (code quotes), "*" (italics), "**" (bold), images (?), and links (?).
  • Fix premiumMemberSince and memberSince.
  • Support for failing image downloads/errors.
  • Support for overflow in activities & activity details? Should this be a custom scrollbar?
  • Add tails to hover popovers.
  • 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.

Other

  • Support code splitting.
  • Talk with @salvage_dev about using discord-presence package name.
You might also like...
A growing collection of responsive Chakra UI Templates ready to drop into your React project.

A growing collection of responsive Chakra UI Templates ready to drop into your React project.

This is simple CRUD React & Redux application. You can create, update,delete your projects and also filter them by their priority
This is simple CRUD React & Redux application. You can create, update,delete your projects and also filter them by their priority

ProjectList This is simple CRUD React & Redux application.You can create,update,delete your projects and also filter them by their priority. Main page

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.
General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

General Component(GC, from now) is a React component generation library which helps you prototype your service quickly.

Get your simple but strongly structured react native starter template
Get your simple but strongly structured react native starter template

React-Native-Starter-Template Simple but strongly structured react native starter template 🚀 Why should i use this? It helps you to easily start your

Starter boilerplate to run your React ChakraUI app as a native desktop app with ElectronJS
Starter boilerplate to run your React ChakraUI app as a native desktop app with ElectronJS

Electron Chakra UI Starter Boilerplate for using Chakra UI in an ElectronJS app. Steps Clone the repo into a folder Install dependencies with npm inst

Add Login, Registration, ... to your React & NextJS App!

Add login, registration, account recovery (password reset), account verification (email verification), social sign in, multi-factor authentication to your Next.js / React App using Ory!

A simple react native starter template that bootstraps development of your mobile application
A simple react native starter template that bootstraps development of your mobile application

rn-start-template A simple react native starter template that bootstraps development of your mobile application. What's inside React native 0.63 templ

💶 The package allows you accept payment using Lazerpay in your react native mobile app ⚡️
💶 The package allows you accept payment using Lazerpay in your react native mobile app ⚡️

Lazerpay Official react-native sdk Lazerpay SDK allows you accept payments easily in your react-native application Installation npm install lazerpay-r

TaxiApp-react-typescript - A simple taxi application that allows you to look for a taxi nearby your place

Taxi Application A simple taxi application that allows you to look for a taxi ne

Owner
Nate-Wilkins
Software Engineer. Skier/Snowboarder. Photographer. Gamer.
Nate-Wilkins
An advanced handler for Discord.js Bots with TypeScript and JavaScript

BlueyCommands An advanced handler for Discord.js Bots with TypeScript and JavaScript support! About Bluey Commands is a command, context, and event ha

João Gabriel Tonaco 2 Dec 22, 2021
Strongly-typed Discord commands on Cloudflare Workers

⚔️ Slshx Slshx is a slightly wacky, experimental, library for building strongly-

MrBBot 164 Dec 26, 2022
⚡ My personal portfolio coded with NextJS 13 and realtime Discord Status with Lanyard!

Personal Website This is my personal portfolio coded while learning Next.JS! ?? Table Of Contents ?? How To Use ⚙️ Configuration ?? Technologies ?? Fe

mertushka 4 Nov 16, 2022
Personal Website UI Template using React-TypeScript. I hope, it will be helpful for your personal website that showcases your work as a software developer.

Personal Website Template Personal Website UI Template using React-TypeScript Class components Personal website can be about anything you want, includ

Sayan Bhattacharyya 9 Sep 16, 2022
Visualize your React components as you interact with your application.

Visualize your React components as you interact with your application. Setup Install React Scope from Chrome web store. (Important) Install React Deve

React Scope 315 Nov 18, 2022
React-Typescript-Webpack was config with React, Typescript, and Webpack without CRA. Faster to start your next react project.

Start your react typescript project with manual webpack config in seconds Flexible to control webpack, easy to deploy Keywords: React Starter, Webpack

jdn97 61 Jan 5, 2023
Lazerpay-react - Lazerpay SDK allows you accept payments easily in your react application

Lazerpay Official react sdk Lazerpay SDK allows you accept payments easily in yo

LazerPay 18 Nov 20, 2022
Msal-react-tester - A tester package when using msal-react in your application

MSAL React Tester is a NPM package to allows you creating unit tests for any of your components that need to be authenticated (or not) using the msal-react package and Azure AD

Sébastien Pertus 14 Dec 20, 2022
Build themeable React & React Native applications with your Bumbag 👝

Warning This library is currently unmaintained. You may want to look at a similar alternative like Chakra UI, Material UI or Mantine. ?? Bumbag Build

jxom 1k Dec 29, 2022
A simple boilerplate that helps you make your react application with Server Side Rendering & Localization support.

Phoenix React applications boilerplate A simple boilerplate that helps you make your react application with Server Side Rendering support. Getting sta

null 150 Dec 20, 2022