import { VeltCommentThread, useCommentAnnotations } from '@veltdev/react';

export default function YourDocument() {

  let commentAnnotations = useCommentAnnotations()

  return (
    <div>
      {commentAnnotations.map((x,i) => <VeltCommentThread key={i} annotationId={x.annotationId}/>)}
    </div>
  )
}
1

Retrieve Comment Annotations

  • Retrieve all comment annotations data.
  • Learn more.
Using Hooks:
let commentAnnotations = useCommentAnnotations()
Using API:
const commentElement = client.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
  // console.log(commentAnnotations);
});
To unsubscribe from the subscription:
subscription?.unsubscribe()
2

Add the Velt Comment Thread component

  • Iterate over the Comment Annotations array and add the Velt Comment Thread component.
  • Pass the annotation Id prop to set the specific Comment Thread data.
Here’s an improved example:

let commentAnnotations = useCommentAnnotations()

return (
  <div>
    {commentAnnotations.map((x,i) => <VeltCommentThread key={i} annotationId={x.annotationId}/>)}
  </div>
)

import { VeltCommentThread, useCommentAnnotations } from '@veltdev/react';

export default function YourDocument() {

  let commentAnnotations = useCommentAnnotations()

  return (
    <div>
      {commentAnnotations.map((x,i) => <VeltCommentThread key={i} annotationId={x.annotationId}/>)}
    </div>
  )
}