import { VeltComments, useVeltClient } from '@veltdev/react';

import { useEffect } from 'react'

export default function YourDocument() {
  const { client } = useVeltClient();

  useEffect(()=>{
    if(client){
      const commentElement = client.getCommentElement();
      commentElement.enableCommentIndex(); // 1 
      commentElement.disableCommentIndex(); // 1
      commentElement.enableDeviceInfo(); // 2 
      commentElement.disableDeviceInfo(); // 2
      commentElement.enableDeviceIndicatorOnCommentPins(); // 3
      commentElement.disableDeviceIndicatorOnCommentPins(); // 3
      client.setUnreadIndicatorMode("verbose"); // 4

    }

  })

  return (
    <div>
        <VeltComments  
            commentIndex={true} {/* 1 */}
            deviceInfo={true}  {/* 2 */}
            deviceIndicatorOnCommentPins={true}  {/* 2 */}
            unreadIndicatorMode={"verbose"} {/* 4 */}
        />
    </div>
  )
}
1

Comment index

Whether comment index is enabled.

Default: false

This appears in the comment sidebar and on the comment pins. When this is on, we show a small icon indicating the comment index in the order of creation date. This enables users to find and navigate to the desired comment quickly.

<VeltComments commentIndex={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableCommentIndex();
commentElement.disableCommentIndex();
2

Device Type Info

Whether device type indicator is enabled.

Default: false

When this is on, we show additional information in the Comment Thread indicating which device the comment was created on. This is useful especially for design tools, where additional context is needed for debugging issues.

<VeltComments deviceInfo={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableDeviceInfo();
commentElement.disableDeviceInfo();
3

Device Indicator on Comment Pins

Whether the device type indicator on Comment Pins is enabled.

Default: false

When this is on, we show a small device type icon on the Comment Pin indicating which device the comment was created on. This is useful especially for design tools, where additional context is needed for debugging issues.

<VeltComments deviceIndicatorOnCommentPins={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableDeviceIndicatorOnCommentPins();
commentElement.disableDeviceIndicatorOnCommentPins();
4

Enable Verbose Mode for Unread Comments

Whether verbose mode is enabled for unread Comments.

Default: 'minimal'

Unread Comments can be in minimal mode or verbose mode.

In minimal mode, a small red dot indicator appears for unread Comments.

In verbose mode, a larger badge with the text “UNREAD” will appear for unread Comments.

<VeltComments unreadIndicatorMode={"verbose"} />

API Method:

client.setUnreadIndicatorMode("verbose"); // use badge with text UNREAD
client.setUnreadIndicatorMode("minimal"); // use small red dot indicator