onData
Description
The event is triggered to fetch comments dataUsage
onData?: (value: string | number) =>
| {
id?: string | number;
content: string;
author?: {
id: string | number;
name?: string;
avatar?: string;
color?: string;
};
user?: string | number;
date?: Date;
format?: "text" | "markdown" | FormatComponent;
}[]
| Promise<{
id?: string | number;
content: string;
author?: {
id: string | number;
name?: string;
avatar?: string;
color?: string;
};
user?: string | number;
date?: Date;
format?: "text" | "markdown" | FormatComponent;
}[]>;
Parameters
-
value- (required) the identifier used to fetch comments data- Can be a
stringornumber, depending on how the widget was initialized - Often represents a stream ID, post ID, or any key used to load the corresponding comments
- Can be a
-
Return value - the function must return either:
-
- an array of
commentobjects, or
- an array of
Promise<comment[]>- a promise that resolves to an array of comment objects.
-
Fields of the comment object:
id- (optional) unique identifier of the commentcontent- (required) text of the commentauthor- (optional) embedded author object:id- (required) unique identifier of the authorname- (optional) display name of the authoravatar- (optional) URL of the author's avatarcolor- (optional) color used to style the author's comments
user- (optional) ID of a user from theuserslistdate- (optional) timestamp when the comment was postedformat- (optional) rendering format:"text" | "markdown" | FormatComponent
Examples
Loading comments through REST helper
import { RestURL } from "@svar-ui/lib-data-provider";
import { Comments } from "@svar-ui/react-comments";
const url = new RestURL("https://some.com/api/comments");
function App() {
return <Comments onData={v => url.get(v)} />;
}
This example demonstrates how to load comments using the REST helper. The url.get(v) method fetches comments from the specified API.
Converting ID of comment's stream to data
import { Comments } from "@svar-ui/react-comments";
const ondata = (v) => {
return fetch(`/api/comments/${v}`).then(r => r.json());
};
function App() {
return <Comments value={1} onData={ondata} />;
}
In this example, the onData function fetches comments based on the stream ID. It returns a promise that resolves to an array of comments.