React / Next.js Other Frameworks Using Props:
< VeltComments onCommentAdd= { ( event ) => yourMethod ( event) } / > const yourMethod = ( event ) => { event?. addContext ( { customKey : 'customValue' } ) ;
} Using Hooks:
import { useCommentAddHandler} from '@veltdev/react' ; export default function YourDocument ( ) { const commentAddEvent = useCommentAddHandler ( ) ;
useEffect ( ( ) => {
console . log ( 'commentAddEvent' , commentAddEvent) ;
} , [ commentAddEvent] ) ;
return (
< div> </ div>
)
} Using API:
const commentElement = client. getCommentElement ( ) ; commentElement. onCommentAdd ( ) . subscribe ( ( event ) => {
console . log ( 'commentAddEvent' , event) ;
} ) ; onCommentAdd Event Data Schema
Field Name Type Description addContext Function Use this to set custom data on the comment annotation CommentAnnotation The annotation that is associated with the comment that was updated documentId string The document ID where the comment was added location Object The location where the comment was added targetAnnotationId string The id of the target annotation
React / Next.js Other Frameworks Using Props:
< VeltComments onCommentUpdate= { ( event ) => yourMethod ( event) } / > const yourMethod = ( event ) => { console . log ( 'commentUpdateEvent' , event) ;
} Using Hooks:
import { useCommentUpdateHandler} from '@veltdev/react' ; export default function YourDocument ( ) { const commentUpdateEvent = useCommentUpdateHandler ( ) ;
useEffect ( ( ) => {
console . log ( 'commentUpdateEvent' , commentUpdateEvent) ;
} , [ commentUpdateEvent] ) ;
return (
< div> </ div>
)
} Using API:
const commentElement = client. getCommentElement ( ) ; commentElement. onCommentUpdate ( ) . subscribe ( ( event ) => {
console . log ( 'commentUpdateEvent' , event) ;
} ) ; onCommentUpdate Event Data Schema
Field Name Type Description annotation CommentAnnotation The annotation that is associated with the comment that was updated type string The type of comment that was updated targetAnnotationId string The ID of the target annotation that contains the comment that was updated targetCommentId number The ID of the target comment that was updated
The comment mode is toggled on and off when you click on the Comment Tool.
React / Next.js with Hooks React / Next.js Other Frameworks 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>
)
} React / Next.js with Hooks React / Next.js Other Frameworks 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 }
</ >
) ;
} You can add a callback method for when a comment link is copied. This can be useful for tracking when a comment link is copied or showing a confirmation toast to the user.
React / Next.js with Hooks React / Next.js Other Frameworks Using Hooks:
const commentLink = useCommentCopyLinkHandler ( ) ;
useEffect ( ( ) => {
console . log ( 'commentLink' , commentLink) ;
} , [ commentLink] ) ;
Using API:
const commentElement = client. getCommentElement ( ) ; commentElement. onCopyLink ( ) . subscribe ( ( commentLink ) => {
console . log ( commentLink) ;
} ) ; 
