value
Description
Optional. Provides a list of users that can be referenced in the comments widgetUsage
value?: {
id?: string | number;
content: string;
author?: {
id: string | number;
name?: string;
avatar?: string;
color?: string;
};
user?: string | number;
date?: Date;
format?: "text" | "markdown" | FormatComponent;
}[] | string | number;
Parameters
id
- (optional) an id of a commentcontent
- (optional) the message contentauthor
- (required) the author object of the message, including:id
- (required) unique identifier of the authorname
- (optional) name of the authoravatar
- (optional) avatar URL of the authorcolor
- (optional) color used to style the author’s messages
user
- (optional) the name of a userdate
- (optional) the date when the message was postedformat
- (optional) controls how the message content is rendered in the comments widget (for the description refer to format) format - (optional) controls how the comment content is rendered in the widget.
Examples
Initializing comments widget with data and embedded authors
import { Comments } from '@svar-ui/react-comments';
const value = [
{
id: "1",
content: "Hello, world!",
author: { id: 1, name: "John Doe" },
date: new Date(),
},
];
export default function App() {
return <Comments value={value} />;
}
Initializing comments widget with data and list of users
import { Comments } from '@svar-ui/react-comments';
const value = [
{
id: "1",
content: "Hello, world!",
user: 1,
date: new Date(),
},
];
const users = [
{ id: 1, name: "John Doe" },
{ id: 2, name: "Jane Doe" },
];
export default function App() {
return <Comments value={value} users={users} />;
}
Initializing empty comments widget
import { Comments } from '@svar-ui/react-comments';
export default function App() {
return <Comments />;
}
Initializing widget and loading comments
import { useState, useEffect } from 'react';
import { Comments } from '@svar-ui/react-comments';
type CommentType = {
id?: string | number;
content: string;
author?: { id: string | number; name?: string; avatar?: string; color?: string };
user?: string | number;
date?: Date;
format?: "text" | "markdown" | any; // FormatComponent referenced elsewhere
};
export default function App() {
const [value, setValue] = useState<CommentType[]>([]);
useEffect(() => {
fetch('/api/comments')
.then((r) => r.json())
.then((x) => setValue(x))
.catch(() => setValue([]));
}, []);
return <Comments value={value} />;
}