CommentSection

The CommentSection component is what contains every other component (UserSection, CommentForm etc). You use this component to organise these other components - for example placing the UserSection above the CommentForm.

Example CommentSection

Using the components on this page and some basic HTML we can create a simple CommentSection:

<div className="commentSection">
    <SignInButton>Sign In</SignInButton>
    <SignOutButton>Sign Out</SignOutButton>
    <SignUpButton>Sign Up</SignUpButton>
    
    <img className={signedIn ? "profilePicture" : "profilePicture--hide"} src={profilePicture} />
    
    <CommentForm buttonText="Submit" />

    <ShowAllCommentsButton><h3>Show all comments</h3></ShowAllCommentsButton>
    <p>Showing {amountOfLoadedComments} of {amountOfComments} comments</p>

    <OrderCommentsSelect best="best" controversial="controversial" top="top" latest="latest" />

    <Comments className="comments_container">
        <h2>Start a discussion.</h2>
    </Comments>

    <LoadMoreCommentsButton>Load more comments</LoadMoreCommentsButton>
</div>

Styling a CommentSection

When creating a custom CommentSection you can give any element a className and use that to set the styling for that certain element.

<CommentForm className='commentForm' />

You can also pass inline CSS through the style prop like so:

<CommentForm style={{ width: '100%' }} />

Props Available

username

username allows you to display the username of the currently signed in user.

Example usage:

<p>{username}</p>

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

amountOfLoadedComments

amountOfLoadedComments allows you to display the total amount of comments that are currently viewable. If the user chooses to load more comments, this value will update.

Example usage:

<p>{amountOfLoadedComments}</p>

amountOfComments

amountOfComments is similar to amountOfLoadedComments, but instead shows the total amount of all comments, wether they have been loaded or not.

We could use these 2 props together like so:

Example usage:

<p>Showing {amountOfLoadedComments} of {amountOfComments} comments</p>

profilePicture

profilePicture allows you to display the currently signed in users 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 or your entire comment section differently and enable your users to see which Comment has been linked too 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>

amountOfNotifications

amountOfNotifications is a value representing the amount of total notifications the signed in user has.

amountOfUnreadNotifications

amountOfUnreadNotifications is a value representing the amount of total unread notifications the signed in user has.

ssoEnabled

ssoEnabled holds true if the current site has SSO enabled.

SSO allows you to use your own custom authenication with Commenze. To use it, you need to be subscribed to the business plan.

Components

CommentForm

CommentForm is how users will post new comments to your comment section. To use CommentForm, you to need pass at least 2 elements: A textarea and button:

<CommentForm>
    <textarea />
    <button>Submit Comment</button>
</CommentForm>

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

<CommentForm>
    <div>
        <textarea />
        <button>Post</button>
    </div>
</CommentForm>

Whereas this would:

<CommentForm>
    <textarea />
    <button>Post</button>
</CommentForm>

ShowAllCommentsButton

ShowAllCommentsButton provides a button that when clicked, shows all the comments of a thread. This button only becomes visible when a user is viewing a linked comment.

ShowAllCommentsButton takes 1 element, which will act as the button. You can either create your own button:

<ShowAllCommentsButton><h3 className='customButton'>Show all comments</h3></ShowAllCommentsButton>

Or you can pass it some text that will be auto applied to a button element:

<ShowAllCommentsButton className='customButton'>Show all comments</ShowAllCommentsButton>

Comments

Comments is the container for all comments and replies. Comments takes an element which will be displayed if there are no comments:

Example usage:

<Comments>
    <h2>Start a discussion.</h2>
</Comments>

Comments can also be given a custom className that you can use to style the container for all the comments:

<Comments className='customClassName' />

OrderCommentsSelect

OrderCommentsSelect provides a HTML select element that allows users to order the comments.

There are 4 ways a user can order a comment section:

You can choose which ones you want your users to be able to use. For example if we wanted to only allow our users to order by 'top' and 'latest':

<OrderCommentsSelect top='top' latest='latest' />

You can also choose to give them custom names. For example if we wanted to changed 'new' to 'latest':

<OrderCommentsSelect top='top' latest='new' />

To change the style of the Select you can give it a custom className:

<OrderCommentsSelect className='customSelect' top='top' latest='new' />

And then target the select itself, and each option using css:

.customSelect {
    //style the whole select
}

.customSelect option {
    //style the options
}

LoadMoreCommentsButton

LoadMoreCommentsButton provides a button that when clicked, loads more comments for the current comment section. This button is not visible when a user is viewing a permalinked comment.

LoadMoreCommentsButton takes 1 element, which will act as the button. You can either create your own button:

<LoadMoreCommentsButton><h3 className='customButton'>Show all comments</h3></LoadMoreCommentsButton>

Or you can pass it some text that will be auto applied to a button element:

<LoadMoreCommentsButton className='customButton'>Show all comments</LoadMoreCommentsButton>

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.

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.

Notifications

Notifications is the container for all Notifications. Notifications takes an element which will be displayed if there are no comments:

Example usage:

<Notifications>
    <h2>You have no notifications.</h2>
</Notifications>

Notifications can also be given a custom className that you can use to style the container for all the Notifications:

<Notifications className='customClassName' />

SignInButton

SignInButton provides a button that when clicked, allows a user to log in to Commenze. If you have SSO enabled, this button will not display.

Example usage:

<SignInButton>Sign In</SignInButton>

SignOutButton

SignOutButton provides a button that when clicked, signs a user out of Commenze. If you have SSO enabled, this button will not display.

Example usage:

<SignOutButton>Sign Out</SignOutButton>

SignUpButton

SignUpButton provides a button that when clicked, allows a user to sign up to Commenze. If you have SSO enabled, this button will not display.

Example usage:

<SignUpButton>Sign Up</SignUpButton>

LoadMoreNotificationsButton

LoadMoreNotificationsButton provides a button that when clicked, loads more of the users notifications. This button only becomes visible when there are more notifications to load.

LoadMoreNotificationsButton takes 1 element, which will act as the button. You can either create your own button:

<LoadMoreNotificationsButton><h3 className='customButton'>Load more</h3></LoadMoreNotificationsButton>

Or you can pass it some text that will be auto applied to a button element:

<LoadMoreNotificationsButton className='customButton'>Load More</LoadMoreNotificationsButton>