Skip to main content

render

Description​

Optional. Controls how messages are displayed in the widget

Usage​

render?: "bubbles" | "flow" | ComponentType<{
    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 React 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={value} render="bubbles" />

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

Rendering messages as a forum thread​

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

This example renders messages in a forum thread style.

Rendering messages with a custom component​

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

This example uses a custom React component for rendering messages.