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.enableDarkMode(); // 1
      commentElement.disableDarkMode(); // 1
      commentElement.enableMobileMode(); // 2
      commentElement.disableMobileMode(); // 2
      commentElement.enableMinimap(); // 3
      commentElement.disableMinimap(); // 3  
    }
  })

  return (
    <div>
        <VeltComments          
            darkMode={true}    {/* 1 */}
            mobileMode={true}  {/* 2 */}
            minimap={true}  {/* 3 */}
            scrollToComponent={false} {/* 4 */}
        />
    </div>
  )
}

  • React / Next.js

  • HTML

1

Dark Mode

Whether dark mode is enabled.

Default: false

<VeltComments darkMode={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableDarkMode();
commentElement.disableDarkMode();
2

Mobile Mode

Whether mobile mode is enabled.

When mobile mode is enabled and the screen width is small enough, comment windows will appear fixed to the bottom of the screen and full width instead of the usual popup window.

Default: false

<VeltComments mobileMode={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableMobileMode();
commentElement.disableMobileMode();
3

Enable Minimap

Whether the minimap is enabled.

Default: false

The minimap shows a bar on the edge of the screen with indicators that show where comments exist.

<VeltComments minimap={true} />

API Method:

const commentElement = client.getCommentElement();
commentElement.enableMinimap();
commentElement.disableMinimap();
4

Enable / Disable Scroll to Comment on Click

Whether, users will be scrolled to the location of a Comment when it is clicked.

Default: true

By default, users will be redirected to a Comment if the comment id is provided in the url. But sometimes this experience is annoying, so we have provided a way to disable the option to automatically scroll users to the location of the Comment.

To disable the feature, set scrollToComponent to false.

<VeltComments scrollToComponent={false}/>

API methods:

const commentElement = client.getCommentElement();
// To enable scroll to component
commentElement.enableScrollToComponent();
// To disable scroll to component
commentElement.disableScrollToComponent();

Was this page helpful?

Task Management ControlsVisibility Controls