Customize Behavior
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
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.
| property | type | description |
|---|---|---|
documentId | string | The document ID where the comment was added |
location | string | The location where the comment was added |
targetElementId | string | The DOM ID of the target element on which the comment was added |
context | Object | Any 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);
};
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();
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
Was this page helpful?
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>
);
}