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​

<script>
  import { RestURL } from "@svar-ui/lib-data-provider";
  import { Comments } from '@svar-ui/svelte-comments';

  const url = new RestURL("https://some.com/api/comments");  
</script>

<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​

<script>
  import { Comments } from '@svar-ui/svelte-comments';

  const ondata = (v) => {
    return fetch(`/api/comments/${v}`).then(r => r.json());
  };
</script>

<Comments value={1} {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.