Comment
A comment shows discussion and feedback from users.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Comment } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| author * | string | None | Who wrote it. Their name as it appears elsewhere in the product. |
| time * | string | None | When it was written, formatted for people to read, not as a raw timestamp. |
| avatar | ReactNode | None | Their avatar. Optional, because the name already identifies them. |
| children * | ReactNode | None | The comment itself. |
| actions | readonly { label: string; onClick?: () => void }[] | None | Actions on this comment, such as reply or edit. Keep them few. |
| nested | ReactNode | None | Replies to this comment. One level of nesting is usually enough. |
Accessibility
What the component does for you, and what it needs from you.
- The author and time are text, so screen readers read them with the comment.
- Nesting is in the markup, so screen reader users know a reply is a reply without seeing the indentation.
- Actions are buttons and must say which comment they belong to. Otherwise a thread full of Reply buttons is unclear.