react-discord-message

A react component that simulates the discord message UI

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:

Prop	Description
username	discord name
isBot	whether to display the 'BOT' tag on the message
time	faint time-string next to username
body	message body
avatar	link to image OR imported image
reactions	array of reaction javascript objects (see below)

Reaction object fields:

Field	Description
emoji	String of the given emoji - use the emoji itself, not it's id. Example: "🔥"
num	How many times the given reaction has been clicked
clicked	Whether 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.

MYKatz/react-discord-message