Event Handlers
1. Take action when a comment is added
The useCommentAddHandler()
hook can be used to attach a callback to the onCommentAdd
event.
import { useCommentAddHandler} from '@veltdev/react';
export default function YourDocument() {
const commentAddEvent = useCommentAddHandler();
useEffect(() => {
console.log('commentAddEvent', commentAddEvent);
}, [commentAddEvent]);
return (
<div>
</div>
)
}
onCommentAdd Event Data 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
The id of the target annotation
The annotation that is associated with the comment that was updated
2. Take action when comment is updated
The useCommentUpdateHandler()
hook can be used to attach a callback to the onCommentUpdate
event.
import { useCommentUpdateHandler} from '@veltdev/react';
export default function YourDocument() {
const commentUpdateEvent = useCommentUpdateHandler();
useEffect(() => {
console.log('commentUpdateEvent', commentUpdateEvent);
}, [commentUpdateEvent]);
return (
<div>
</div>
)
}
onCommentUpdate Event Data 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
3. Listen to changes in comment mode
The comment mode is toggled on and off when you click on the Comment Tool.
The useCommentModeState()
hook can be used to get the Comment mode without having to subscribe to changes. When the Comment mode changes, the hook return value will update.
The subscription is automatically unsubscribed when the component dismounts.
import { useCommentModeState } from '@veltdev/react';
export default function YourDocument() {
let commentModeState = useCommentModeState()
return (
<div>
Comment Mode is turned on: {commentModeState}
</div>
)
}
4. Listen to Comment Selection changes
The useCommentSelectionChangeHandler
hook can be used to subscribe to Comment selection changes.
import React, { useEffect } from 'react';
import { useCommentSelectionChangeHandler } from '@veltdev/react';
function YourComponent() {
const commentSelectionChange = useCommentSelectionChangeHandler();
useEffect(() => {
console.log('commentSelectionChange', commentSelectionChange);
}, [commentSelectionChange]);
return (
<>
Selected Comment: {commentSelectionChange.annotation.id}
</>
);
}
Was this page helpful?