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.showCommentsOnDom(); // 1
      commentElement.hideCommentsOnDom(); // 1
      commentElement.enableDialogOnHover(); // 2
      commentElement.disableDialogOnHover(); // 2
      commentElement.enableDialogOnTargetElementClick(); // 3
      commentElement.disableDialogOnTargetElementClick(); // 3
      commentElement.enableFloatingCommentDialog(); // 4 
      commentElement.disableFloatingCommentDialog(); // 4
    }
    

  })

  return (
    <div>
        <VeltComments          
            commentsOnDom={false} {/* 1 */}
            dialogOnHover={true} {/* 2 */}
            dialogOnTargetElementClick={true} {/* 3 */}
            floatingCommentDialog={true} {/* 4 */}
        />
    </div>

  • React / Next.js

  • HTML

1

Show/Hide comments on DOM

Whether comments are shown on the DOM.

Default: true

By default, all the comments will be visible on DOM whenever we are able to detect to elements for that. But users can hide it from DOM if required.

There are 2 ways to show/hide comments on DOM:

Configuring attributes on the React Component:

{/* `true` to show comments, `false` to hide comments */}
<VeltComments commentsOnDom={false} />

Using API methods:

const commentElement = client.getCommentElement();
// to show comments on DOM
commentElement.showCommentsOnDom();
// to hide comments on DOM
commentElement.hideCommentsOnDom();
2

Comment dialog on hover

Whether the comment dialog shows on hover over the comment pin or the target element.

Default: true

<VeltComments dialogOnHover={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableDialogOnHover();
commentElement.disableDialogOnHover();
3

Comment dialog on target element click

Whether the comment dialog opens when target element is clicked. This is relevant only for Popover mode.

Default: true

<VeltComments dialogOnTargetElementClick={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableDialogOnTargetElementClick();
commentElement.disableDialogOnTargetElementClick();
4

Floating comment dialog

Whether floating comment dialog is shown next to comment pin on hover or click.

Default: true

<VeltComments floatingCommentDialog={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableFloatingCommentDialog();
commentElement.disableFloatingCommentDialog();

Was this page helpful?

UI/UX ControlsPin