import { 
  useVeltClient,
  VeltProvider, 
  VeltCommentsSidebar
} from '@veltdev/react';
import { useState , useEffect} from 'react';

export default function App() {

  const { client } = useVeltClient();

  // event handler for when a comment is clicked on (with Location)
    const onCommentClick = (event) => {
      //handle custom navigation by getting location
      const { pageId } = event.location;
      yourNavigateToPageMethod(pageId);
    };

  // event handler for when a comment is clicked on (without Location)
  const onCommentClick = (event) => {
    //handle custom navigation by getting context
    const { pageId } = event.context;
    yourNavigateToPageMethod(pageId);
  };

  useEffect(()=>{
    if(client){
      const commentElement = client.getCommentElement();
      commentElement.openCommentSidebar(); // opens the comments side bar
      commentElement.closeCommentSidebar(); // closes the comments side bar
      commentElement.toggleCommentSidebar(); // toggles the comments side bar
      commentElement.enableSidebarUrlNavigation();
      commentElement.disableSidebarUrlNavigation();
    }
  })

  return (
    <VeltProvider apiKey="API_KEY">
      <VeltCommentsSidebar 
        onCommentClick={onCommentClick}
        urlNavigation={false}
      />

    </VeltProvider>
  );
}
  • React / Next.js

  • HTML

1

Customize navigation for non-URL based navigation

By default, we attempt to navigate the user to the comment Location when a user clicks on one in the sidebar.

If you want to alter this behavior, you can listen to click events and add an event listener to handle the navigation in a custom way.

Custom navigation using Location

Using the onCommentClick handler, you can fetch the context and make the necessary state changes to locate the comment correctly.

When a comment is clicked, the handler will be called with the location data of the comment.

propertytypedescription
documentIdstringThe document ID where the comment was added
locationstringThe location where the comment was added
targetElementIdstringThe DOM ID of the target element on which the comment was added
contextObjectAny context data passed when the comment was added
 <VeltCommentsSidebar onCommentClick={onCommentClick} /> 
// event handler for when a comment is clicked on 
const onCommentClick = (event) => {
  //handle custom navigation by getting location
  const { pageId } = event.location;
  yourNavigateToPageMethod(pageId);

Custom navigation without using Location

If you do not want to use Location, you can alternatively handle custom navigation by calling the addContext() method in the event handler.

 <VeltCommentsSidebar onCommentClick={onCommentClick} /> 
// event handler for when a comment is clicked on 
const onCommentClick = (event) => {
  //handle custom navigation by getting context
  const { pageId } = event.context;
  yourNavigateToPageMethod(pageId);
};
You would choose to use addContext() over Location if you do not want to segregate your comments by Location
2

Enable/Disable Sidebar URL Navigation

Default: false

By default, Comment Sidebar URL navigation is disabled. So when user clicks on any comment in the sidebar, we will not redirect the user to a different page url if the comment was located on a different page. You would need to listen to onCommentClick events and then handle the event to change the URL.

To enable Sidebar URL Navigation, you can set the urlNavigation attribute to true. When this is enabled, clicking on Sidebar comments will change the page URL to wherever the comment was added.

{/* `true` to enable sidebar url navigation, `false` to disable sidebar url navigation */}
<VeltCommentsSidebar urlNavigation={true} />

You can also use API methods:

const commentElement = client.getCommentElement();
// to enable sidebar url navigation
commentElement.enableSidebarUrlNavigation();
// to disable sidebar url navigation
commentElement.disableSidebarUrlNavigation();
3

Toggling the Comments Side Bar

To toggle the sidebar, you can use the following methods:

const commentElement = client.getCommentElement();
commentElement.openCommentSidebar(); // opens the comments side bar
commentElement.closeCommentSidebar(); // closes the comments side bar
commentElement.toggleCommentSidebar(); // toggles the comments side bar