Menu
Commenze

back

Comment

  • Getting Started

  • Example Comment

    Styling

  • Props Available

    showReplyBox

    admin

    signedIn

    isOwner

    userHigherAuthority

    username

    authorUsername

    totalVotes

    timeSince

    depth

    userProfilePicture

    profilePicture

    linked

    amountOfChildren

  • Components Available

    Replies

    ToggleMenu

    HoverMenu

    DeleteButton

    ReplyButton

    UpvoteButton

    DownvoteButton

    HideCommentButton

    RevealCommentButton

    ShadowBanButton

    PermalinkButton

    Text

    ReportButton

    ReplyForm

Comment

The Comment component gives you access to a single user comment.

Example Comment

Using the components and props detailed on this page we can create a very simple implementation of a custom Comment. Its important that we wrap everything in one div, so that the comment is contained.

jsx
<div className={linked ? "comment--linked depth-" + depth : "comment depth-" + depth}>
    <div className="comment_votes">
        <UpvoteButton>🡹</UpvoteButton>
        <p>{totalVotes}</p>
        <DownvoteButton>🡻</DownvoteButton>
    </div>

    <div className="comment_content">  
        <Text />
        <ReplyButton>Reply</ReplyButton>
        <PermalinkButton>Permalink</PermalinkButton>
    </div>
</div>

Styling a Comment

When creating a custom Comment 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

showReplyBox

showReplyBox holds true if the user has clicked the ReplyButton.

Example usage:

{ showReplyBox ? <ReplyForm>...</ReplyForm> : null }

admin

admin holds true if the comments author is an admin. This is useful for displaying a badge to notify other users of a admins authority.

Example usage:

{ admin ? <p>Admin</p> : null }

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 currently signed in user.

Example usage:

<p>{username}</p>

authorUsername

authorUsername allows you to display the username of the author of a comment.

Example usage:

<p>{authorUsername}</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>

userProfilePicture

userProfilePicture allows you to display the currently signed in users profile picture. An example use of this would be showing the users profile picture when they are making a reply.

Example usage:

<img src={userProfilePicture} />

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.

Replies takes 1 of 2 things that will act as a button that loads more replies - either a string that will be used as the buttons text:

<Replies>Load More Replies</Replies>

Or by passing it your own custom element:

<Replies><h3>Custom Load More Replies Button</h3></Replies>

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 user's 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>

The shadow ban button will only display if the currently signed in user is an administrator and the comment author is a regular user.

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 will post new comments in reply to an existing comment. To use ReplyForm, you to need pass at least 2 elements: A textarea and button:

jsx
<ReplyForm>
    <textarea />
    <button>Submit Reply</button>
</ReplyForm>

Note: The textarea and button that ReplyForm requires cannot be nested within ReplyForm. For example this would not work:

jsx
<ReplyForm>
    <div>
        <textarea />
        <button>Post</button>
    </div>
</ReplyForm>

Whereas this would:

jsx
<ReplyForm>
    <textarea />
    <button>Post</button>
</ReplyForm>