Popover Setup
import {
VeltProvider,
VeltComments,
VeltCommentTool,
VeltCommentBubble
} from '@veltdev/react';
export default function App() {
return (
<VeltProvider apiKey="API_KEY">
<VeltComments popoverMode={true} />
<div class="table">
<div className="cell" id="cell-id-1">
<VeltCommentTool
targetCommentElementId="cell-id-1"
/>
</div>
<div className="cell" id="cell-id-2">
<VeltCommentBubble
targetCommentElementId="cell-id-2"
/>
</div>
</div>
</VeltProvider>
);
}
React / Next.js
HTML
Import Comment components
Import the VeltComments
, VeltCommentTool
, and VeltCommentBubble
components.
import {
VeltProvider,
VeltComments,
VeltCommentTool,
VeltCommentBubble
} from '@veltdev/react';
Add Comments component with Popover mode
Add the VeltComments
component to the root of your app and mark the popoverMode
property as true
.
This component is required to render comments in your app.
Popover mode means that comments can be attached to specific target elements. The UX pattern is very similar to commenting in Google Sheets.
<VeltProvider apiKey="API_KEY">
<VeltComments popoverMode={true}/>
</VeltProvider>
Add Comment Tool component
Add the VeltCommentTool
component on each component where you want to enable commenting.
For example, in a table you could add this tool to each cell and show it on hover or right click context menu.
You must specify a target element ID which binds the tool to that element. When users click on the comment tool, it will attach a comment to the target element.
Once the comment is saved, you will notice a triangle on the top right corner of the element indicating that a comment is present on this element.
<div class="table">
<div className="cell" id="cell-id-1">
<VeltCommentTool
targetCommentElementId="cell-id-1"
/>
</div>
<div className="cell" id="cell-id-2">
<VeltCommentTool
targetCommentElementId="cell-id-2"
/>
</div>
</div>
Add the Comment Bubble component (optional)
This component accepts a target element ID & binds to the comment associated with it.
It also shows the total number of threads in the given comment.
This gives you a lot of flexibility as you can place this component anywhere and provides a more obvious affordance to your users.
<div class="table">
<div className="cell" id="cell-id-1">
<VeltCommentBubble
targetCommentElementId="cell-id-1"
/>
</div>
<div className="cell" id="cell-id-2">
<VeltCommentBubble
targetCommentElementId="cell-id-2"
/>
</div>
</div>
Test Integration
Test it out by opening the page with Velt components in your browser.
Click on the Comment Tool
and leave a comment on the target element.
Was this page helpful?
import {
VeltProvider,
VeltComments,
VeltCommentTool,
VeltCommentBubble
} from '@veltdev/react';
export default function App() {
return (
<VeltProvider apiKey="API_KEY">
<VeltComments popoverMode={true} />
<div class="table">
<div className="cell" id="cell-id-1">
<VeltCommentTool
targetCommentElementId="cell-id-1"
/>
</div>
<div className="cell" id="cell-id-2">
<VeltCommentBubble
targetCommentElementId="cell-id-2"
/>
</div>
</div>
</VeltProvider>
);
}