Web components to easily build and display fake Discord messages on your webpages.
If you use Vue in your project, you should use vue-discord-message. If you use React in your project, you should use react-discord-message.
- Design modeled 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
- Simple syntax!
<discord-messages>
<discord-message>
Hey guys, I'm new here! Glad to be able to join you all!
</discord-message>
<discord-message author="Dawn" avatar="red">
Hi, I'm new here too!
</discord-message>
<discord-message author="Sanctuary" avatar="https://i.imgur.com/0TeacfY.png" role-color="#0099ff">
Hey, <discord-mention>User</discord-mention> and <discord-mention>Dawn</discord-mention>. Welcome to our server! Be sure to read through the <discord-mention type="channel">rules</discord-mention>. You can ping <discord-mention type="role" color="#70f0b4">Support</discord-mention> if you need help.
</discord-message>
<discord-message author="Twelve" avatar="https://i.imgur.com/Mc0F0Hf.png" role-color="#70f0b4">
Hello everyone! How's it going?
</discord-message>
<discord-message author="User">
Thank you <discord-mention highlight>Sanctuary</discord-mention>!
</discord-message>
<discord-message author="Yotsuba" avatar="https://i.imgur.com/amw0MGJ.png">
I'm doing well, <discord-mention>Twelve</discord-mention>. What about yourself?
</discord-message>
<discord-message author="Twelve" avatar="https://i.imgur.com/Mc0F0Hf.png" role-color="#70f0b4">
!8ball How am I doing today?
</discord-message>
<discord-message author="Rinon" avatar="https://i.imgur.com/axQ9wJl.png" role-color="violet" bot>
Yes.
</discord-message>
</discord-messages>Check out the live demo for further examples.
If you're using a package manager, you can install it like normal.
yarn add wc-discord-message
# or npm install wc-discord-messageImport it and call the necessary functions in your app entry file.
import { applyPolyfills, defineCustomElements } from 'wc-discord-message/loader'
applyPolyfills().then(() => defineCustomElements(window))And then use it in your HTML templates, JSX, etc.
export default class App {
render() {
return (
<discord-messages>
<discord-message>
Hey guys, I'm new here! Glad to be able to join you all!
</discord-message>
<discord-message author="Dawn" avatar="red">
Hi, I'm new here too!
</discord-message>
</discord-messages>
)
}
}Refer to the Stencil docs on framework integration if you're using a specific framework. If you're using Vue, you can use this for the .ignoredElements config option:
// main.js
Vue.config.ignoredElements.push(/^discord-/) // for more precise matching: /^discord-(messages?|mention|embed(-fields?)?)$/If you're want to use the browser build, you can pull it in via unpkg.
<script src="https://unpkg.com/wc-discord-message@^2.0.0/dist/wc-discord-message/wc-discord-message.js"></script>And then use it anywhere in your HTML.
<body>
<discord-messages>
<discord-message author="Sanctuary" avatar="https://i.imgur.com/0TeacfY.png" role-color="#0099ff">
Hey, <discord-mention>User</discord-mention> and <discord-mention>Dawn</discord-mention>. Welcome to our server!
</discord-message>
</discord-messages>
</body>CSS updates and general fixes were applied. The only "breaking" change is that the .discord-highlight-mention class has been moved up from to .discord-message.discord-message-body to .discord-message, in case you're targetting it in your CSS somewhere.
The syntax is kept fairly simple. Here's a basic example of a regular conversation:
<discord-messages>
<discord-message>
Hey guys, I'm new here! Glad to be able to join you all!
</discord-message>
<discord-message author="Dawn" avatar="red">
Hi, I'm new here too!
</discord-message>
<discord-message author="Sanctuary" avatar="https://i.imgur.com/0TeacfY.png" role-color="#0099ff">
Hey, <discord-mention>User</discord-mention> and <discord-mention>Dawn</discord-mention>. Welcome to our server!
</discord-message>
</discord-messages>By default, this package uses the Google Fonts CDN to pull in the Roboto font. This isn't the same font Discord uses, so if you want to provide your own, you can override the CSS.
/* index.css */
.discord-messages {
font-family: 'Your Font', sans-serif;
}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 window.$discordMessage.avatars.
window.$discordMessage = {
avatars: {
'default': 'green'
jojo: 'https://i.imgur.com/BOlehTj.jpg',
djs: require('./assets/discord-avatar-djs.png'),
},
}Sometimes you'll want to use the same message data across multiple messages. You can do so by providing an object of profiles in window.$discordMessage.profiles.
window.$discordMessage = {
profiles: {
sanc: {
author: 'Sanctuary',
avatar: 'https://i.imgur.com/0TeacfY.png',
},
rinon: {
author: 'Rinon',
avatar: 'https://i.imgur.com/axQ9wJl.png',
bot: true,
roleColor: '#ee82ee',
},
},
}And then in your HTML:
<discord-messages>
<discord-message profile="rinon">
Welcome to our server, <mention>Sanctuary</mention>!
</discord-message>
<discord-message profile="sanc">
Hey, glad to be here!
</discord-message>
</discord-messages>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 /src/components/ folder.
This is a wrapper for any child <discord-message> component. It must be used in order for messages to display properly.
If the default slot is left empty, the mention will be rendered as 'User', 'Role', or 'channel', depending on the type prop given.
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.
<discord-message>
Hi, I'm part of the normal message content.
<discord-embed slot="embeds" color="#0099ff">
Hi, I'm part of the embed message content.
</discord-embed>
</discord-message>A wrapper for any child <discord-embed-field> 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.
<discord-message>
<discord-embed slot="embeds">
Hi, I'm part of the embed message content.
<discord-embed-fields slot="fields">
<!-- Embed fields go here -->
</discord-embed-fields>
</discord-embed>
</discord-message>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.
<discord-message>
<discord-embed slot="embeds">
Hi, I'm part of the embed message content.
<discord-embed-fields slot="fields">
<discord-embed-field field-title="Inline field" inline>
Field content.
</discord-embed-field>
<discord-embed-field field-title="Inline field" inline>
Field content.
</discord-embed-field>
</discord-embed-fields>
</discord-embed>
</discord-message>