Article Comments
Article comments: votes, sorting, replies, moderation. Pro · Content and social › Feed and news
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add article-commentsnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { ArticleComments } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
value | ArticleComment[] | Controlled value; use with onValueChange. | |
defaultValue | ArticleComment[] | [] | Initial value when uncontrolled. |
onValueChange | (comments: ArticleComment[]) => void | Called with the new value when it changes. | |
sort | 'top' | 'newest' | 'oldest' | Order of top-level comments; replies stay chronological. | |
defaultSort | 'top' | 'newest' | 'oldest' | 'top' | Initial sort when uncontrolled. |
onSortChange | (sort: ArticleCommentsSort) => void | Called with the new sort when it changes. | |
currentUser | ArticleCommentAuthor | The signed-in reader. Without one, the composer gives way to a sign-in prompt. | |
onSignIn | () => void | Shows a "Sign in" button in the prompt for signed-out readers. | |
onPost | (comment: ArticleComment, parentId: string | null) => void | Called after a comment is posted; parentId is null for top-level comments. | |
onVote | (commentId: string, vote: -1 | 0 | 1) => void | Called after the reader votes; the list already updated the score. | |
onReport | (commentId: string) => void | Shows a "Report" action on other readers' comments. | |
totalCount | number | Number in the header when the list holds only a page of the discussion (default: the comments in the list). | |
hasMore | boolean | false | More comments can be loaded: shows a "Show more comments" button. |
onLoadMore | () => void | Called by the "Show more comments" button. | |
loadingMore | boolean | false | The next page is loading: the button shows a spinner. |
closed | boolean | false | Discussion closed: no composer and no reply buttons. |
maxLength | number | 2000 | Longest comment in characters (default 2000); a counter appears near the limit. |
rules | ReactNode | Community rules or a moderation note under the composer. | |
maxDepth | number | 3 | Nesting levels that get their own indentation; deeper replies line up with their parent (default 3). |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Level of the title (default 2). |
locale | string | BCP 47 locale for numbers and dates; defaults to the ThemeProvider's, then the browser's. | |
labels | Partial<ArticleCommentsLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Article Card — News card: vertical, horizontal and over a photo
- Live Blog — Live blog: update feed, pinned and key events
- Breaking News — “Breaking” banner with rotating headlines
- Article Header — Article header: section, headline, lede, authors and date
- Byline — Byline: authors, published and updated dates, reading time
- Article Figure — Image with caption and photo credit
- Pull Quote — Pull quote with attribution
- Key Points — “Key points” summary block
- Editor Note — Update, correction, disclosure and sponsored-content notes
- Article Toc — Article table of contents that tracks the current section
- Reading Progress — Reading progress bar
- Share Bar — Share: Telegram, VK, X, WhatsApp, email and copy link
Previous: Breaking News · Next: Citation Evidence Lens · All Content and social