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