rdm

react-discord-message

Discord message component for react.js

Showing:

Popularity

Downloads/wk

1

GitHub Stars

3

Maintenance

Last Commit

2yrs ago

Contributors

0

Package

Dependencies

1

Size (min+gzip)

11.9KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

react-discord-message

A react component that simulates the discord message UI

Example

react-discord-message example

An interactive demo is available at https://pollybot.xyz

Features

  • Discord message w/ proper styles
  • Customizable avatar
  • Customizable date/time message
  • Definable, interactive emoji reactions (w/ Twemoji, the same emoji set used by discord)
  • Channel (#channelname) highlighting

Upcoming Features

  • Option to disable reaction interactivity
  • End-user ability to add reactions
  • Reaction animation
  • Ability to use custom image as emoji

PR's welcome!

Usage

import DiscordMessage from "react-discord-message";

DiscordMessage Props:

PropDescription
usernamediscord name
isBotwhether to display the 'BOT' tag on the message
timefaint time-string next to username
bodymessage body
avatarlink to image OR imported image
reactionsarray of reaction javascript objects (see below)

Reaction object fields:

FieldDescription
emojiString of the given emoji - use the emoji itself, not it's id. Example: "🔥"
numHow many times the given reaction has been clicked
clickedWhether the reaction has been clicked by the user. Optional, defaults to {false}

See below for examples

Basic message

<DiscordMessage
    username="Katz"
    isBot={false}
    time="Right now"
    body="Hey! Thanks for checking out this component!"
    avatar="https://pbs.twimg.com/profile_images/1009305542026657792/iZg9qfK7_400x400.jpg"
/>

Message with reactions

<DiscordMessage
    username="Katz"
    isBot={false}
    time="Right now"
    body="Hey! Thanks for checking out this component!"
    avatar="https://pbs.twimg.com/profile_images/1009305542026657792/iZg9qfK7_400x400.jpg"
    reactions={[
        {
        emoji: "🐦",
        num: 6,
        clicked: true
        },
        {
        emoji: "🔥",
        num: 23,
        clicked: false
        }
    ]}
/>

License

This project is licensed under the MIT License. For more information on what this means, click here.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100