Event Handlers
import { VeltComments, useVeltClient } from '@veltdev/react';
import { useEffect } from 'react'
export default function YourDocument() {
const { client } = useVeltClient();
// 2
const addContext = (event) => {
event?.addContext({ customKey: 'customValue' });
}
useEffect(()=>{
if(client){
const commentElement = client.getCommentElement();
// 4
commentElement.onCommentModeChange().subscribe((mode) => {
//mode contains the state after change
});
}
})
return (
<div>
<VeltComments
onCommentAdd={(event) => addContext(event)} {/* 1 */}
onCommentUpdate={(event) => yourMethod(event)} {/* 3 */}
/>
<VeltCommentTool onCommentModeChange={(mode) => yourMethod(mode)} {/* 4 */}/>
</div>
React / Next.js
HTML
Take action when a comment is added
The onCommentAdd event is emitted when a new comment is created. You can add a callback function to handle onCommentAdd events when they occur.
<VeltComments onCommentAdd={(event) => yourMethod(event)} />
onCommentAdd Event Schema
The document ID where the comment was added
The location where the comment was added
Use this to set custom data on the comment
Attach additional context to each comment
When an onCommentAdd event occurs, you can also attach additional context to the comment using the event.addContext() method, which takes in a key-value paired object.
<VeltComments onCommentAdd={(event) => yourMethod(event)} />
const yourMethod = (event) => {
event?.addContext({ customKey: 'customValue' });
}
Take action when comment is updated
The onCommentUpdate event is emitted when a comment is updated.
<VeltComments onCommentUpdate={(event) => yourMethod(event)} />
onCommentUpdate Event Schema
The annotation that is associated with the comment that was updated
The type of comment that was updated
The ID of the target annotation that contains the comment that was updated
The ID of the target comment that was updated
Listen to changes in comment mode
The comment mode is toggled on and off when you click on the Comment Tool.
To subscribe to changes in the comment mode, use the onCommentModeChange() method.
As a property on VeltCommentTool:
<VeltCommentTool onCommentModeChange={(mode) => onCommentModeChange(mode)} />
API method:
commentElement.onCommentModeChange().subscribe((mode) => {
//mode contains the state after change
});
Was this page helpful?
import { VeltComments, useVeltClient } from '@veltdev/react';
import { useEffect } from 'react'
export default function YourDocument() {
const { client } = useVeltClient();
// 2
const addContext = (event) => {
event?.addContext({ customKey: 'customValue' });
}
useEffect(()=>{
if(client){
const commentElement = client.getCommentElement();
// 4
commentElement.onCommentModeChange().subscribe((mode) => {
//mode contains the state after change
});
}
})
return (
<div>
<VeltComments
onCommentAdd={(event) => addContext(event)} {/* 1 */}
onCommentUpdate={(event) => yourMethod(event)} {/* 3 */}
/>
<VeltCommentTool onCommentModeChange={(mode) => yourMethod(mode)} {/* 4 */}/>
</div>