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  
      commentElement.enablescrollToComment(); // 4
      commentElement.disablescrollToComment(); // 4
      commentElement.enableCommentPinHighlighter(); // 5
      commentElement.disableCommentPinHighlighter(); // 5
      commentElement.enablePinShadowDOM(); // 6
      commentElement.disablePinShadowDOM(); // 6
      commentElement.enableDialogShadowDOM(); // 6
      commentElement.disableDialogShadowDOM(); // 6
      commentElement.enableSidebarShadowDOM(); // 6
      commentElement.disableSidebarShadowDOM(); // 6
    }
  })

  return (
    <div>
        <VeltComments          
            darkMode={true}    {/* 1 */}
            mobileMode={true}  {/* 2 */}
            minimap={true}  {/* 3 */}
            scrollToComment={false} {/* 4 */}
        />
    </div>
  )
}
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 scrollToComment to false.

<VeltComments scrollToComment={false}/>

API methods:

const commentElement = client.getCommentElement();
// To enable scroll to component
commentElement.enablescrollToComment();
// To disable scroll to component
commentElement.disablescrollToComment();
5

Enable pin highlighter outline

Wheter the pin highlighter outline is enabled or not.

Default: enabled

API Methods:

const commentElement = client.getCommentElement();
commentElement.enableCommentPinHighlighter(); // to enable comment pin highlight
commentElement.disableCommentPinHighlighter(); // to disable comment pin highlight
6

Disable ShadowDOM

Whether the ShadowDOM is enabled or not on certain components.

Default: enabled

By default, a ShadowDOM is used with certain components to ensure that your application’s CSS does not interfere with the styling of the SDK components.

If you want your application’s CSS to affect the styling of the SDK components, you can disable the ShadowDOM.

To disable ShadowDOM on all Comment features:

<VeltComments shadowDom={false} />

To disable ShadowDOM on individual features:

<VeltComments pinShadowDom={false} dialogShadowDom={false} />
<VeltCommentsSidebar shadowDom={false} />

API methods:

const commentElement = client.getCommentElement();
commentElement.enablePinShadowDOM();
commentElement.disablePinShadowDOM();
commentElement.enableDialogShadowDOM();
commentElement.disableDialogShadowDOM();
commentElement.enableSidebarShadowDOM();
commentElement.disableSidebarShadowDOM();