Skip to main content
import { VeltCommentPin, useCommentAnnotations } from '@veltdev/react';

export default function YourDocument() {

  const yourMethod = (event) => {
    event?.addContext({ position: {x: 200, y: 100}, commentType: 'manual'});
  }

  let commentAnnotations = useCommentAnnotations()

  return (

    <VeltComments onCommentAdd={(event) => yourMethod(event)} />

    <div className='comments-container'>
      {
        commentAnnotations.map((commentAnnotation) => {
          return (
            <div key={commentAnnotation.annotationId} style={{
              position: 'absolute',
              left: commentAnnotation.context.position.x + dragPosition.x,
              top: commentAnnotation.context.position.y + dragPosition.y,
              transform: 'translate(0%, -100%)'
            }}>
              <VeltCommentPin annotationId={commentAnnotation.annotationId}></VeltCommentPin>
            </div>
          )
        })
      }
    </div>
  )
}
1

Add custom metadata when comment is added

You have two options for adding comments with custom positioning metadata:Option A: Velt-Managed Click Events
  • Use the onCommentAdd prop of the VeltComments component to add custom metadata when a comment is added.
  • You need to set the mandatory commentType: 'manual' property to the metadata object.
  • React / Next.js
  • Other Frameworks
<VeltComments onCommentAdd={(event) => yourMethod(event)} />

const yourMethod = (event) => {
  event?.addContext({ position: {x: 200, y: 100}, commentType: 'manual'});
}
Option B: Custom Click Event Handling
  • Handle click events on your canvas and use the addManualComment method to create a comment with custom metadata.
  • React / Next.js
  • Other Frameworks
const context = {
  position: {x: 200, y: 100},
};
const commentElement = useCommentUtils();
commentElement.addManualComment({ context });
2

Retrieve all Comment Annotations

Retrieve all Comment Annotations using the useCommentAnnotations() hook.To learn more about the useCommentAnnotations() hook, read here.
  • React / Next.js
  • Other Frameworks
let commentAnnotations = useCommentAnnotations()
3

Render the Velt Comment Pin component and set the position

Add the Velt Comment Pin component and pass in the Comment Annotation Id. Now retrieve the context to retrieve the custom metadata you set earlier and use it to set the position of the Comment Pin.
  • React / Next.js
  • Other Frameworks

let commentAnnotations = useCommentAnnotations()

return (
<div className='comments-container'>
  {
    commentAnnotations.map((commentAnnotation) => {
      return (
        <div key={commentAnnotation.annotationId} style={{
          position: 'absolute',
          left: commentAnnotation.context.position.x + dragPosition.x,
          top: commentAnnotation.context.position.y + dragPosition.y,
          transform: 'translate(0%, -100%)'
        }}>
          <VeltCommentPin annotationId={commentAnnotation.annotationId}></VeltCommentPin>
        </div>
      )
    })
  }
</div>
)

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

export default function YourDocument() {

  const yourMethod = (event) => {
    event?.addContext({ position: {x: 200, y: 100}, commentType: 'manual'});
  }

  let commentAnnotations = useCommentAnnotations()

  return (

    <VeltComments onCommentAdd={(event) => yourMethod(event)} />

    <div className='comments-container'>
      {
        commentAnnotations.map((commentAnnotation) => {
          return (
            <div key={commentAnnotation.annotationId} style={{
              position: 'absolute',
              left: commentAnnotation.context.position.x + dragPosition.x,
              top: commentAnnotation.context.position.y + dragPosition.y,
              transform: 'translate(0%, -100%)'
            }}>
              <VeltCommentPin annotationId={commentAnnotation.annotationId}></VeltCommentPin>
            </div>
          )
        })
      }
    </div>
  )
}
⌘I