Customize the ThreadedComments Component
Explore some examples of how to customize Threaded Comments.
While you can get Threaded Comments out the box with one simple component, it may not cover all your use cases or designs. Here you can have a look at how you can use our modular components to build up your own customized Threaded Comments experience.
These examples are variations of our own Threaded Comments component, so if you'd like to have a look at how we implemented that take a look at our source code.
Expanded replies example #
The comments are expanded by default, and can be collapsed by clicking `Hide replies`. You simply have to set the showReplies prop to initiallyExpanded. A potential use case could be for a notes section.
Comment section example #
The comments are expanded by default, and can be collapsed by clicking `Hide replies`, similarly to the previous example. In this case, however, the composer is on top and is also always in expanded state.
Since the composer is on top, comments should be sorted with the newest on top as well, so that new comments appear right under where users are typing. This can be achieved using the messageOrder prop set to newest_on_top.
Thread list with replies example #
An attempt to replicate our ThreadList component. There is no composer in this case, but you can still reply inline - a feature the ThreadList doesn't have!
We need to make sure that the composer is not included and that replies are sorted with the newest one being on top. It is also important to take care of the button styles, so that hover states expand to the end of the thread container.
Figma-style Thread list example #
Replicate exactly what Figma's thread lists look like. You can't reply inline, which takes away a lot of the original ThreadedComments functionality.
Make sure you pay close attention to the CSS for this example. Specifically, Cord CSS uses different grid templates for four different cases (when there's a message with no reactions, when there's a message with reactions, when it's being edited and when it's deleted). When you change the grid-template-areas for one of these cases, you need to make sure you check that the grid templates look good for all the other ones as well. This will ensure there are no surprises in any of these cases.
We also need to hide the facepile of the users who replied to the thread. We can remove it by targeting the .cord-facepile class name and setting display: none.
Not finding the answer you need? Ask our Developer Community