MinimizedComment
The MinimizedComment component represents a comment when a user chooses to hide/minimize it.
Example MinimizedComment
Using the components and props detailed on this page we can create a very simple implementation of a custom MinimizedComment. Its important that we wrap everything in one div, so that the comment is contained.
<div className="comment_container--minimized">
<RevealCommentButton className="toggleComment" revealProps={revealProps}>[+]</RevealCommentButton>
<p id="username">{username}</p>
<p className="timestamp">{timeSince}</p>
<p className="comment_totalVotes">{totalVotes} points</p>
<p>({amountOfChildren} children)</p>
</div>
Styling a MinimizedComment
When creating a custom MinimizedComment you can give any element a className and use that to set the styling for that certain element - as seen below.
<ReplyButton className='replyButton'>Reply</ReplyButton>
You can also pass inline CSS through the style prop like so:
<ReplyButton style={{ width: '100%' }}>Reply</ReplyButton>
Props Available
signedIn
signedIn holds true if there is currently a user signed in. This is useful for displaying things only to authorized users, such as notifications.
Example usage:
{ signedIn ? <SignOutButton /> : <SignInButton /> }
isOwner
isOwner holds true if the currently signed in user is the owner of this comment. An example use is showing the delete button only for the owner of the comment:
{ isOwner ? <DeleteButton /> : null }
userHigherAuthority
userHigherAuthority holds true if the currently signed in user is of higher authority than the comments original author. For example if you were signed is as an admin on your comment section and the comment author was a regular user, userHigherAuthority would hold true.
Building on the example before for isOwner, we can show the delete button if the userHigherAuthority is true, or they are the owner of the comment:
{ isOwner || userHigherAuthority ? <DeleteButton /> : null }
username
username allows you to display the username of the author of a comment.
Example usage:
<p>{username}</p>
totalVotes
totalVotes allows you to display the total amount of votes a comment has received.
Example usage:
<p>{totalVotes}</p>
timeSince
timeSince allows you to display the time since the Comment was created.
Example usage:
<p>{timeSince}</p>
depth
depth represents a specific Comments depth in the comment section. For example if a comment section only has 1 Comment, and that Comment has a reply, the 'root' Comment will have a depth of 0 and the reply would have a depth of 1. If a reply was made to this reply, it would have a depth of 2 and so on.
We can use depth to create a variety of different effects. Lets say we have a border on the left hand side of a Comment, and as we get deeper, we want the border to change color. We could use depth to do this like so:
Example usage:
<div className={'comment_container depth-' + depth}>
<p>{userName}</p>
<Text />
//The rest of your Comment code
</div>
profilePicture
profilePicture allows you to display the Comment authors profile picture.
Example usage:
<img src={profilePicture} />
linked
linked holds true or false, which represent wether a Comment has been linked to - for example using the PermalinkButton. You can use linked to style a Comment differently and enable your users to see which Comment has been linked to easier.
For example, we can change the background color of a Comment when it has been linked like so:
<div className={linked ? 'comment_container--linked' : 'comment_container'}>
<p>{userName}</p>
<Text />
//The rest of your Comment code
</div>
amountOfChildren
amountOfChildren allows you to display the amount of replies a comment has.
Example usage:
<p>{amountOfChildren} replies</p>
Components
Replies
Replies represents the container for the comments replies. You should always use Replies, otherwise your comment section will not display properly.
ToggleMenu
ToggleMenu provides a button that when clicked, displays a menu. To hide the menu the same button has to be clicked.
A ToggleMenu takes 2 elements. The first element will act as a button that allows a user to toggle the menu:
<ToggleMenu>
<p>Show Menu</p>
</ToggleMenu>
The next is the menu itself. This is fully customizable and can use any other component shown on this page:
<ToggleMenu>
<p>Show Menu</p>
<div className="menu">
<DeleteButton>Delete</DeleteButton>
<ShadowBanButton>Ban</ShadowBanButton>
</div>
</ToggleMenu>
In the example above when the Show Menu button is clicked, the div with className of "menu" is revealed. The styling of this menu is up to you, but we recommend that you start from this basis:
.menu {
position: absolute;
z-index: 1;
}
This will ensure that your menu is above the comment, and in the right place.
HoverMenu
HoverMenu provides a button that when hovered, displays a menu.
A HoverMenu takes 2 elements. The first element will act as a button that allows a user to see the menu:
<HoverMenu>
<p>Show Menu</p>
</HoverMenu>
The next is the menu itself. This is fully customizable and can use any other component shown on this page:
<HoverMenu>
<p>Show Menu</p>
<div className="menu">
<ReplyButton>Reply</ReplyButton>
<ReportButton>Report</ReportButton>
</div>
</HoverMenu>
In the example above when the Show Menu button is hovered, the div with className of "menu" is revealed. The styling of this menu is up to you, but we recommend that you start from this basis:
.menu {
position: absolute;
z-index: 1;
}
This will ensure that your menu is above the comment, and in the right place.
DeleteButton
DeleteButton provides the user with a way to delete a comment. A user can delete their own comment, and other users' comments if they are of a greater authority - for example, an admin can delete a moderators comment.
A DeleteButton takes 1 of 2 things, either a string that will be used as the buttons text:
<DeleteButton>Delete Comment</DeleteButton>
Or by passing it your own custom element:
<DeleteButton><h3>Custom Delete Button</h3></DeleteButton>
ReplyButton
ReplyButton provides a way for users to toggle a ReplyForm on and off.
A ReplyButton takes 1 of 2 things, either a string that will be used as the buttons text:
<ReplyButton>Delete Comment</ReplyButton>
Or by passing it your own custom element:
<ReplyButton><p>Custom Reply Button</p></ReplyButton>
UpvoteButton
UpvoteButton provides a way for users to vote a Comment positively.
A UpvoteButton takes 1 of 2 things, either a string that will be used as the buttons text:
<UpvoteButton>🡹</UpvoteButton>
Or by passing it your own custom element (it is common to link to an external icon):
<UpvoteButton><img src='some-external-icon' /></UpvoteButton>
A UpvoteButton's style can be changed if the currently signed in user has upvoted a Comment. This allows you to create a visual cue to users to let them know they have voted a specific Comment.
To do this you simply need to pass a className to the UpvoteButton like so:
<UpvoteButton className='yourClassName'>🡹</UpvoteButton>
Now, you will have access to 2 classes:
- This will determine the styling when the user has not upvoted a specific Comment
- This will determine the styling when the user has upvoted a specific Comment
DownvoteButton
DownvoteButton provides a way for users to vote a Comment negatively.
A DownvoteButton takes 1 of 2 things, either a string that will be used as the buttons text:
<DownvoteButton>🡻</DownvoteButton>
Or by passing it your own custom element (it is common to link to an external icon):
<DownvoteButton><img src='some-external-icon' /></DownvoteButton>
A DownvoteButton's style can be changed if the currently signed in user has downvoted a Comment. This allows you to create a visual cue to users to let them know they have voted a specific Comment.
To do this you simply need to pass a className to the DownvoteButton like so:
<DownvoteButton className='yourClassName'>🡹</DownvoteButton>
Now, you will have access to 2 classes:
- This will determine the styling when the user has not downvoted a specific Comment
- This will determine the styling when the user has downvoted a specific Comment
HideCommentButton
HideCommentButton provides a way for users to hide a Comment and its replies, causing a Comment to become a MinimizedComment.
A HideCommentButton takes 1 of 2 things, either a string that will be used as the buttons text:
<HideCommentButton>[-]</HideCommentButton>
Or by passing it your own custom element (it is common to link to an external icon):
<HideCommentButton><img src='some-external-icon' /></HideCommentButton>
- You can customize a MinimizedComment Here .
RevealCommentButton
RevealCommentButton provides a way for users to reveal a Comment and its replies when it was in the MinimizedComment view.
A RevealCommentButton takes 1 of 2 things, either a string that will be used as the buttons text:
<RevealCommentButton>[+]</RevealCommentButton>
Or by passing it your own custom element (it is common to link to an external icon):
<RevealCommentButton><img src='some-external-icon' /></RevealCommentButton>
- You can customize a minimized Comment Here .
ShadowBanButton
ShadowBanButton provides a way for administrators and moderators to shadow ban a user.
A ShadowBanButton takes 1 of 2 things, either a string that will be used as the buttons text:
<ShadowBanButton>Shadow Ban User</ShadowBanButton>
Or by passing it your own custom element:
<ShadowBanButton><p>Custom Shadow Ban Button</p></ShadowBanButton>
PermalinkButton
PermalinkButton provides a way for users to link a certain comment.
A PermalinkButton takes 1 of 2 things, either a string that will be used as the buttons text:
<PermalinkButton>Permalink</PermalinkButton>
Or by passing it your own custom element:
<PermalinkButton><p>Custom Permalink Button</p></PermalinkButton>
Text
Text represents the comments text.
Text is simply used as is, and takes no extra elements:
<Text />
ReportButton
ReportButton provides a way for users report another user based on their comment.
A ReportButton takes 1 of 2 things, either a string that will be used as the buttons text:
<ReportButton>Report</ReportButton>
Or by passing it your own custom element:
<ReportButton><p>Custom Report Button</p></ReportButton>
ReplyForm
ReplyForm is how users post a reply to an existing comment on your comment section. ReplyForm provides you with a form and a button. You can customize the text of the button with the buttonText prop:
<ReplyForm buttonText='Submit' className='replyForm' />
You can then customize the textarea and button like so:
.replyForm textarea {
//customize the textarea
}
.replyForm button {
//customize the button
}