Skip to main content

onData

Description​

The event is triggered to fetch comments data

Usage​

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 string or number, depending on how the widget was initialized
    • Often represents a stream ID, post ID, or any key used to load the corresponding comments

  • Return value - the function must return either:

      • an array of comment objects, or
    • Promise<comment[]> - a promise that resolves to an array of comment objects.

Fields of the comment object:

  • id - (optional) unique identifier of the comment
  • content - (required) text of the comment
  • author - (optional) embedded author object:
    • id - (required) unique identifier of the author
    • name - (optional) display name of the author
    • avatar - (optional) URL of the author's avatar
    • color - (optional) color used to style the author's comments
  • user - (optional) ID of a user from the users list
  • date - (optional) timestamp when the comment was posted
  • format - (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.