Comment
A comment displays discussions and user feedback.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
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 | — | Who wrote it. Their name as it appears elsewhere in the product. |
| time * | string | — | When it was written, formatted for the reader rather than as a raw timestamp. |
| avatar | ReactNode | — | Their avatar. Optional, and the name still carries the identification. |
| children * | ReactNode | — | The comment itself. |
| actions | readonly { label: string; onClick?: () => void }[] | — | Actions on this comment, such as reply or edit. Keep them few. |
| nested | ReactNode | — | 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 the time are text, so they are read with the comment rather than being visual decoration around it.
- Nesting is carried in the markup, so a reader knows a reply is a reply without seeing the indentation.
- Actions are real buttons and need to say which comment they belong to, since Reply repeated down a thread is ambiguous.