npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@penwin/discord-components-react-render

v4.3.8

Published

React bindings for @skyra/discord-components-core

Downloads

60

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

sagiriikedasagiriikeda

Keywords

skyratypescripttsyarndiscordbotcomponentswebcomponentslitreact

Readme

@skyra/discord-components-react

React bindings for @skyra/discord-components-core

Web components to easily build and display fake Discord messages on your webpages

License Patreon

Core Package

npm npm npm

React Bindings

npm npm npm

Support Server

Table of Contents

Description

Discord message components to easily build and display fake Discord messages on your webpage.

This is an adaptation of wc-discord-message from Danktuary

Upgrading guide

The source code and documentation of this package has been updated for version 4.x of this package. To find out how to upgrade from v3.x to v4.x, please refer to the upgrading guide

Features

  • Design modelled after Discord itself
  • Comfy and compact mode support
  • Dark and light themes support
  • Set the message author's username, avatar (use defaults or provide your own), role color, and "bot" tag status
  • Display fake user, role, and channel mentions
  • Complete embed support
  • Uses [Lit Element][lit] to support all browsers and environments
  • Simple syntax!

Installation

yarn add @skyra/discord-components-core @skyra/discord-components-react
# or npm install @skyra/discord-components-core @skyra/discord-components-react

Usage

[!IMPORTANT]

For further examples on how to use components, please refer to the Stackblitz examples linked below. Choose the framework you are using and click on the "Open in Stackblitz" button to see the code and how it renders in the browser.

Important

React is currently the only library among the "big" libraries for frontend development that does not fully support custom elements / webcomponents yet (see this React documentation page for more info). For this reason we ship the package @skyra/discord-components-react.

We sincerely hope that this situation will improve in the future, but no one knows what their plans are.

Using the Discord font

This library can use the Discord font if you load it into your project. You can do so by including the CSS below:

@font-face {
  font-family: 'Whitney';
  src: url('https://cdn.skyra.pw/whitney-font/v2/Book.woff') format('woff');
  font-weight: 400;
}

@font-face {
  font-family: 'Whitney';
  src: url('https://cdn.skyra.pw/whitney-font/v2/Medium.woff') format('woff');
  font-weight: 500;
}

@font-face {
  font-family: 'Whitney';
  src: url('https://cdn.skyra.pw/whitney-font/v2/Semibold.woff') format('woff');
  font-weight: 600;
}

@font-face {
  font-family: 'Whitney';
  src: url('https://cdn.skyra.pw/whitney-font/v2/Bold.woff') format('woff');
  font-weight: 700;
}

Vite

Live Demo

Open in Stackblitz

Create React App

Important Notes

Create React App is no longer the recommended way to start with a React app as per React's own documentation. We very strongly recommend using Vite instead.

NextJS

Live Demo Pages Directory

Open in Stackblitz

Live Demo App Directory

Open in Stackblitz

Known limitations

  1. All the React components will only render on the client, they are bundled with the 'use client'; header that NextJS expects for CSR only components. This is because there is currently no good way to render webcomponents on the server. When @lit-labs/nextjs adds support for the app directory we can revisit this limitation.

  2. When using the app directory we are not able to get profiles working. We are open to suggestions on how to fix this, ideally through a pull request to [https://github.com/skyra-project/discord-components-implementations/tree/main/templates/nextjs-ts].

Docusaurus

Live Demo

Open in Stackblitz

Notes

TypeScript module augments

This library uses a custom object on the browser window for configuration. Under normal circumstances by simply importing the package (with import @skyra/discord-components-react) the module augmentations should also be loaded. If for whatever reason this does not happen, then you can define them manually yourself. You can do so with the following code snippet:

import type { DiscordMessageOptions } from '@skyra/discord-components-react';

declare global {
  // eslint-disable-next-line no-var
  var $discordMessage: DiscordMessageOptions | undefined;
}

Avatar shortcuts

The current avatar shortcut strings available are "blue" (default), "gray", "green", "orange", and "red". These shortcuts map to the following image links:

{
  "blue": "https://cdn.discordapp.com/attachments/654503812593090602/665721745466195978/blue.png",
  "gray": "https://cdn.discordapp.com/attachments/654503812593090602/665721746569166849/gray.png",
  "green": "https://cdn.discordapp.com/attachments/654503812593090602/665721748431306753/green.png",
  "orange": "https://cdn.discordapp.com/attachments/654503812593090602/665721750201434138/orange.png",
  "red": "https://cdn.discordapp.com/attachments/654503812593090602/665721752277483540/red.png"
}

If you want to add to or override the shortcuts, you can set them via globalThis.$discordMessage.avatars or by using the setConfig function (import { setConfig } from '@skyra/discord-components-react').

globalThis.$discordMessage = {
  avatars: {
    default: 'blue',
    skyra: 'https://github.com/NM-EEA-Y.png',
    djs: require('./assets/discord-avatar-djs.png') // You can use require syntax as well
  }
};
import { setConfig } from '@skyra/discord-components-react';

setConfig({
  avatars: {
    default: 'blue',
    skyra: 'https://github.com/NM-EEA-Y.png',
    djs: require('./assets/discord-avatar-djs.png') // You can use require syntax as well
  }
});

Profile shortcuts

Sometimes you'll want to use the same message data across multiple messages. You can do so by providing an object of profiles in globalThis.$discordMessage.profiles or by using the setConfig function (import { setConfig } from '@skyra/discord-components-react').

globalThis.$discordMessage = {
  profiles: {
    skyra: {
      author: 'Skyra',
      avatar: 'https://github.com/NM-EEA-Y.png',
      bot: true,
      verified: true,
      roleColor: '#1e88e5'
    },
    favna: {
      author: 'Favna',
      avatar: 'https://github.com/favna.png',
      roleColor: '#ff0000'
    }
  }
};
import { setConfig } from '@skyra/discord-components-react';

setConfig({
  profiles: {
    skyra: {
      author: 'Skyra',
      avatar: 'https://github.com/NM-EEA-Y.png',
      bot: true,
      verified: true,
      roleColor: '#1e88e5'
    },
    favna: {
      author: 'Favna',
      avatar: 'https://github.com/favna.png',
      roleColor: '#ff0000'
    }
  }
});

And then in your React code:

<DiscordMessages>
  <DiscordMessage profile="skyra">
    Welcome to our server, <mention>Favna</mention>!
  </DiscordMessage>
  <DiscordMessage profile="favna">Hey, glad to be here!</DiscordMessage>
</DiscordMessages>

Theming

Each of the components accepts the standard HTML properties for passing styling, such as className for passing CSS classes (JSS / CSS / SCSS etc.) or style to pass inline style.

You can also pass your own custom HTML tags, for example set a data-qa to be able to navigate to the component in your unit tests / end-to-end tests

Components notes

Below are notes for a few certain components. If you want to see what props each component has, check their readme.md file in the respective folder.

DiscordMessages component

This is a wrapper for any child <DiscordMessage> component. It must be used in order for messages to display properly.

DiscordMention component

If the default slot is left empty, the mention will be rendered as 'User', 'Role', or 'channel', depending on the type prop given.

DiscordEmbed component

An embed that can be attached to the end of your messages. The default slot is used for the embed's description. The footer slot is used for the footer text.

To ensure the embed gets displayed correctly inside your message, be sure to give it the proper slot attribute.

<DiscordMessage>
  Hi, I'm part of the normal message content.
  <DiscordEmbed slot="embeds" color="#0099ff">
    Hi, I'm part of the embed message content.
  </DiscordEmbed>
</DiscordMessage>

EmbedFields component

A wrapper for any child <DiscordEmbedField> components. Must be used in order for fields to display properly. To ensure the embed fields gets displayed correctly inside your embed, be sure to give it the proper slot attribute.

<DiscordMessage>
  <DiscordEmbed slot="embeds">
    Hi, I'm part of the embed message content.
    <DiscordEmbedFields slot="fields">
      <!-- Embed fields go here -->
    </DiscordEmbedFields>
  </DiscordEmbed>
</DiscordMessage>

EmbedField component

At least 2 consecutive fields need to be marked as inline in order for them to actually display next to each other. The maximum amount of inline fields is 3, and drops to 2 if an embed thumbnail is used.

<DiscordMessage>
  <DiscordEmbed slot="embeds">
    Hi, I'm part of the embed message content.
    <DiscordEmbedFields slot="fields">
      <DiscordEmbedField fieldTitle="Inline field" inline>
        Field content.
      </DiscordEmbedField>
      <DiscordEmbedField fieldTitle="Inline field" inline>
        Field content.
      </DiscordEmbedField>
    </DiscordEmbedFields>
  </DiscordEmbed>
</DiscordMessage>

Screenshots

Dark Mode

A normal conversation

Compact mode

With an embed

Light Mode

A normal conversation

Compact mode

With an embed

Contributors

Please make sure to read the Contributing Guide before making a pull request.

Thank you to all the people who already contributed to Discord Components!