ItzDerock / discord-components

Discord Webcomponents for real looking messages on the web

Discord Components

A fork of @skyra-project/discord-components designed for use in discord-html-transcripts

Changes

• Adds <discord-code-block>
• Adds <discord-header>
• Adds better support in <discord-time>
  • Automatically updating based on timestamp and format option
• Adds better support in <discord-attachment>
  • Adds support for generic attachments, videos, and audio
• Adds option to do server-side hydration (changes also reflected in the react bindings)

Original README:

Discord Components

Fake Discord messages for the web

---

Table of Contents

• Discord Components
  • Description
  • Features
  • Demos
    • Angular
    • React
    • Vue
    • No Framework
  • Screenshots
    • Dark Mode
    • Light Mode
  • Contributors

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

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
• Simple syntax!

Demos

Angular

React

Create React App

NextJS

Vue

No Framework

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 Skyra Project!