Skip to main content

render

Description​

Optional. Controls how messages are displayed in the widget

Usage​

render?: "bubbles" | "flow" | Component<{
    owned?: string | number;  
    edit?: string | number;   
    author: {                  
        id: string | number;
        name?: string;
        avatar?: string;
        color?: string;
    };
    date: Date;               
}>;

Parameters​

The render property accepts one of the following:

  • "bubbles" – displays messages in a bubble-style layout, similar to a chat interface.

  • "flow" (default) – displays messages in a forum/thread style layout.

  • Component – a custom Svelte component used to render each message.

When using a Component, the component receives the following props:

  • owned – (optional) the ID of the current user, used to apply “owned” styling to messages.

  • edit – (optional) the ID of the user allowed to edit the message.

  • author – (required) the author object of the message, including:

    • id – (required) unique identifier of the author
    • name – (optional) display name of the author
    • avatar – (optional) avatar URL of the author
    • color – (optional) color used to style the author’s messages

  • date – (required) the timestamp of when the message was posted

Examples​

Rendering messages as a text chat​

<Comments {value} render="bubbles" />

This example renders messages in a bubble style, similar to a text chat.

Rendering messages as a forum thread​

<Comments {value} render="flow" />

This example renders messages in a forum thread style.

Rendering messages with a custom component​

<Comments {value} render={MyMessageRenderer} />

This example uses a custom component for rendering messages.