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:

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!

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

3.6.1 (2023-08-18)

Bug Fixes

• deps: update all non-major dependencies (#318) (2c2f2f4)
• deps: update all non-major dependencies (#352) (1674e2a)
• react: add types to export mapping (bba1772)
• update generated react code (1d3161b)

3.6.0 (2023-01-23)

Bug Fixes

• update @stencil/core dependency (df07642)

3.5.0 (2022-12-27)

Note: Version bump only for package @skyra/discord-components-react

3.4.1 (2022-08-06)

Note: Version bump only for package @skyra/discord-components-react

3.4.0 (2022-05-10)

Note: Version bump only for package @skyra/discord-components-react

3.3.1 (2022-04-25)

Bug Fixes

• core: emit [@vite-ignore](https://github.com/vite-ignore) comments on dynamic imports (ba84b9e)
• deps: update all non-major dependencies (#240) (e0e22fe)

3.3.0 (2022-04-06)

Features

• add discord-time component (#229) (cdf0810)

3.2.0 (2022-04-04)

Features

• add new components to react bundle (3055336)

3.1.1 (2022-03-10)

Bug Fixes

• rebuild react code (e1d3766)

3.1.0 (2022-01-12)

Note: Version bump only for package @skyra/discord-components-react

3.0.1 (2022-01-08)

Bug Fixes

• react: use createElement named import for better compatibility with Vite (1d770da)

3.0.0 (2022-01-08)

Bug Fixes

• fixed embed description and footer disappearing when dynamically editing title (bdec29c)

BREAKING CHANGES

• discord-embed no longer takes the properties footer-image and timestamp, they are moved to the discord-embed-footer component.
• The embed description now has to go into its own component, discord-embed-description

<discord-embed slot="embeds">
-  Custom emojis in the embed description:
+  <discord-embed-description slot="description">Custom emojis in the embed description:</discord-embed-description>
</discord-embed>

• The embed footer now has to go into its own component, discord-embed-footer

- <discord-embed slot="embeds" footer-image="/static/sapphire.png" timestamp="03/20/2021">
+ <discord-embed slot="embeds">
{ /* other embed components */ }
-  <span slot="footer">Open source libraries to aid in the creation of Discord bots</span>
+  <discord-embed-footer slot="footer" footer-image="/static/sapphire.png" timestamp="03/20/2021">
+    Open source libraries to aid in the creation of Discord bots
+  </discord-embed-footer>
</discord-embed>

2.13.0 (2021-12-22)

Note: Version bump only for package @skyra/discord-components-react

2.12.1 (2021-12-06)

Note: Version bump only for package @skyra/discord-components-react

2.12.0 (2021-11-13)

Features

• Add discord-custom-emoji component & custom emojis in embed titles (#168) (61a808e), closes #163

2.11.6 (2021-11-08)

Bug Fixes

• react: fix ESM loading (8a43f53)

2.11.5 (2021-11-08)

Bug Fixes

• react: only output ESM bundle (cf9da04)

2.11.4 (2021-11-08)

Bug Fixes

• docs: update nextjs codesandbox link (4d6382f)

2.11.3 (2021-11-08)

Note: Version bump only for package @skyra/discord-components-react

2.11.3-alpha.3 (2021-11-08)

Bug Fixes

• react: add dependency on tslib (cc0b85e)

2.11.3-alpha.2 (2021-11-08)

Bug Fixes

• react: no longer use esbuild for bundling (d03ed4d)

2.11.3-alpha.1 (2021-11-08)

Bug Fixes

• debump required nodejs engine to 14.0.0 (310f9bc)

2.11.3-alpha.0 (2021-11-08)

Note: Version bump only for package @skyra/discord-components-react

2.11.2 (2021-10-03)

Bug Fixes

• re-fix react bundle. The output file has to be mjs for this to all work (946652b)

Reverts

• Revert "fix(react): fixed output targets" (129f14f)

2.11.1 (2021-10-03)

Bug Fixes

• react: fixed output targets (ba9faf1)

2.11.0 (2021-10-02)

Features

• Thread Accessories (#150) (232f05d)

2.10.1-alpha.0 (2021-09-21)

Bug Fixes

• output react bundle as .js to fix a Webpack issue, not loading named imports of .mjs files (bc166f6)

2.10.0 (2021-09-12)

Features

• add discord-tenor-video component (#127) (c90dde0)

2.9.1 (2021-09-12)

Note: Version bump only for package @skyra/discord-components-react

2.9.1-alpha.0 (2021-09-10)

Note: Version bump only for package @skyra/discord-components-react

2.9.0 (2021-09-05)

Note: Version bump only for package @skyra/discord-components-react

2.8.1 (2021-08-18)

Note: Version bump only for package @skyra/discord-components-react

2.8.0 (2021-08-18)

Features

• add component buttons (#110) (50f78c5)

2.7.1 (2021-08-07)

Bug Fixes

• react: minify build output (932aaf8)

2.7.0 (2021-08-07)

Features

• add system messages (#105) (53440f4)

2.6.0 (2021-08-05)

Features

• add replies (+ style changes) (#103) (065e452)

2.5.0 (2021-08-04)

Note: Version bump only for package @skyra/discord-components-react

2.4.0 (2021-07-25)

Note: Version bump only for package @skyra/discord-components-react

2.3.0 (2021-07-25)

Features

• add reactions (#96) (3bb19a6)

2.2.0 (2021-07-22)

Features

• add invite and attachments container components (#94) (3b782a0)

2.1.1 (2021-07-10)

Bug Fixes

• readme: update urls and add nextJS demo (551f9e7)

2.1.0 (2021-06-26)

Note: Version bump only for package @skyra/discord-components-react

2.0.9 (2021-06-21)

Note: Version bump only for package @skyra/discord-components-react

2.0.8 (2021-06-21)

Bug Fixes

• docs: remove default font from ToC (82a1281)

2.0.6 (2021-05-19)

Bug Fixes

• specify sideEffects and fix es2015 and es2017 file paths (b759b3c)

2.0.5 (2021-05-15)

Note: Version bump only for package @skyra/discord-components-react

2.0.4 (2021-05-15)

Bug Fixes

• change links from discord-message-components to discord-components (5a8e1e1)

2.0.3 (2021-05-15)

Note: Version bump only for package @skyra/discord-components-react

2.0.3-alpha.3 (2021-05-15)

Note: Version bump only for package @skyra/discord-components-react

2.0.3-alpha.2 (2021-05-15)

Note: Version bump only for package @skyra/discord-components-react

2.0.3-alpha.1 (2021-05-15)

Bug Fixes

• fixed package bundling (11d2627)

Features

• use whitney font as default font (d7c9267)

2.0.3-alpha.0 (2021-03-20)

Bug Fixes

• react: move core from peer to regular dependencies (8d1e3ff)
• fixed readmes and such (bdb8846)

2.0.2 (2020-10-26)

Bug Fixes

• react: allow peer dependency of React 17 and Core 2 (ae5fb27)

2.0.1 (2020-10-07)

Note: Version bump only for package @skyra/discord-components-react

2.0.0 (2020-09-05)

Features

• bumped stencil-core to v2 (59ef71e), closes /github.com/ionic-team/stencil/blob/master/CHANGELOG.md#-200-2020-08-31 #12

BREAKING CHANGES

• IE11, Edge 16-18, Safari 10 and ES5 builds and support for them is fully removed now. Also some files are exported under different names in core. For a full list see

1.3.0 (2020-07-26)

Features

• rename master branch to main (0bc3666)

1.2.2 (2020-07-13)

Note: Version bump only for package @skyra/discord-components-react

1.2.1 (2020-07-08)

Note: Version bump only for package @skyra/discord-components-react

1.2.0 (2020-07-07)

Note: Version bump only for package @skyra/discord-components-react

1.1.4 (2020-07-06)

Note: Version bump only for package @skyra/discord-components-react

1.1.3 (2020-07-06)

Note: Version bump only for package @skyra/discord-components-react

1.1.2 (2020-06-27)

Bug Fixes

• bump package, regenerate react output (07af3cc)

1.1.1 (2020-06-06)

Bug Fixes

• bump packages, fixing some stenciljs bugs (2ac34a9)

1.1.0 (2020-05-19)

Note: Version bump only for package @skyra/discord-components-react

1.0.1 (2020-05-10)

Note: Version bump only for package @skyra/discord-components-react

1.0.0 (2020-05-10)

Note: Version bump only for package @skyra/discord-components-react

1.0.0-alpha.1 (2020-05-10)

Note: Version bump only for package @skyra/discord-components-react

1.0.0-alpha.0 (2020-05-10)

Features

• create packages (1ad5856)