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
    }

  })

  return (
    <div>
        <VeltComments  
            commentIndex={true} {/* 1 */}
            deviceInfo={true}  {/* 2 */}
        />
    </div>
  )
}

  • React / Next.js

  • HTML

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 indicator

Whether device type indicator is enabled.

Default: false

When this is on, we show a small device type icon 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();

Was this page helpful?

Action MethodsEvent Handlers