1.0.0 • Published 6 years ago
react-discord-message v1.0.0
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.
1.0.0
6 years ago