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.

jsx

<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:

jsx

css

<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:

jsx

css

<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:

jsx

<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:

jsx

<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:

css

.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:

jsx

<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:

jsx

<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:

css

.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:

.yourClassName

- This will determine the styling when the user has not upvoted a specific Comment

.yourClassName--active

- 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:

.yourClassName

- This will determine the styling when the user has not downvoted a specific Comment

.yourClassName--active

- 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>

Note

- 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>

Note

- 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:

css

.replyForm textarea {
    //customize the textarea
}

.replyForm button {
    //customize the button
}

Comment

Getting Started

Props Available

Components Available

MinimizedComment

Example MinimizedComment

Styling a MinimizedComment

Props Available

signedIn

isOwner

userHigherAuthority

username

totalVotes

timeSince

depth

profilePicture

linked

amountOfChildren

Components

Replies

ToggleMenu

HoverMenu

DeleteButton

ReplyButton

UpvoteButton

DownvoteButton

HideCommentButton

RevealCommentButton

ShadowBanButton

PermalinkButton

Text

ReportButton

ReplyForm