Stream Setup
Import Comment components
Import the VeltComments
component.
import {
VeltProvider,
VeltComments,
} from '@veltdev/react';
Add `VeltComments` component with Stream mode
Add the VeltComments
component inside a scrolling container. Make it a sibling to the element that contains the content you want to be commented.
In the VeltComments
component, mark the streamMode
attribute as true
.
Also set the streamViewContainerId
attribute to the id of the scrolling container.
Stream mode renders all comment dialog boxes in a column on the right side similar to Google Docs. It works well with Text mode, which is enabled by default.
Setting a reference to the container ID helps us position & scroll the comment stream as the user scrolls more robustly.
<VeltProvider apiKey="API_KEY">
<div id="scrolling-container-id">
//This element is scrollable
<div className="target-content">
//This element contains the content that you want to be commented.
</div>
<VeltComments
streamMode={true}
streamViewContainerId="scrolling-container-id"
/>
</div>
</VeltProvider>
Test Integration
Test it out by adding a comment.
Select any text, a Comment Tool
button will appear near the highlighted text.
Click on it to add a comment and see the comment appear in the comment stream.
Was this page helpful?