Skip to main content

value

Description

Optional. Provides a list of users that can be referenced in the comments widget

Usage

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 comment
  • content - (optional) the message content
  • author – (required) the author object of the message, including:
    • id – (required) unique identifier of the author
    • name – (optional) name of the author
    • avatar – (optional) avatar URL of the author
    • color – (optional) color used to style the author’s messages
  • user - (optional) the name of a user
  • date - (optional) the date when the message was posted
  • format - (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

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

const value = [
{
id: "1",
content: "Hello, world!",
author:{ id: 1, name: "John Doe" },
date: new Date(),
},
];
</script>

<Comments {value} />

Initializing comments widget with data and list of users

<script>
import { Comments } from '@svar-ui/svelte-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" },
];
</script>

<Comments {value} {users} />

Initializing empty comments widget

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

<Comments />

Initializing widget and loading comments

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

let value = [];

fetch('/api/comments')
.then(r => r.json())
.then(x => value = x);
</script>

{#await value}
<Comments {value} />
{/await}