Comment Thread setup

Set up the standalone VeltCommentThread component using comment annotation IDs from getCommentAnnotations to render individual threads anywhere in your app.

1. Retrieve Comment Annotations

   • Retrieve all comment annotations data.
   • Learn more.

   React / Next.js

   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()
   

   Other Frameworks

   const commentElement = Velt.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:

   React / Next.js

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

   Other Frameworks

   <!-- 
     If you are using pure html, inject <velt-comment-thread annotation-id="ANNOTATION_ID"></velt-comment-thread>
     In other frameworks, you can loop over the comments inside the template itself
   -->
   <velt-comment-thread annotation-id="ANNOTATION_ID"></velt-comment-thread>
   

React / Next.js

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>
  )
}

const commentElement = client.getCommentElement();
let subscription = commentElement.getAllCommentAnnotations().subscribe((comments) => {
    // If you are using pure html, inject <velt-comment-thread annotation-id="ANNOTATION_ID"></velt-comment-thread>
    // In other frameworks, you can loop over the comments inside the template itself
});

//To unsubscribe from the subscription:
subscription?.unsubscribe()