CanvasPin
Contextual Comments embeds a customizable commenting experience into your application, enabling people to collaborate in real-time and asynchronously on a <canvas>
element.
Before we start
Before utilizing the <Comments>
element, it is essential to initialize a room with a defined name and ID for the participant.
How to use
To add contextual comments to a <canvas>
element, you need to add the <Comments>
element, configure position and styling, and then point to the 'useCanvasPin' hook.
useCanvasPin
is a Comments Hook that specifies that the active area to receive comments with Pins is a <canvas>
element.
import { Comments, useCanvasPin } from "@superviz/react-sdk";
function Room({ participantId }) {
const { pin } = useCanvasPin({ canvasId: "mycanvas" });
return (
<Comments pin={pin} buttonLocation="top-right" position="left" />
);
}
export default Room;
Properties
Name | Type | Description |
---|---|---|
pin | pin | Required Specifies the element or plugin that can receive comments. For <canvas> elements always use the useCanvasPin hook. |
position | string | Optional Represents the position where the element with the list of comments will be placed on the page. Values are left and right Default value: left |
buttonLocation | string | Optional Represents the position where the button to activate or deactivate the comments functionality will be placed. Values are top-left , top-right , bottom-left , bottom-right , or an HTML element id. Default value: top-left |
styles | string | Optional CSS String that allows you to customize all elements individually. |
useComments
Hook
openThreads
Type: () => void
Opens the superviz-comments section
, where you can see the list of comments and reply to them.
function Room() {
const { openThreads } = useComments();
function open() {
openThreads();
}
return <button onClick={open}>Open Threads</button>
}
closeThreads
Type: () => void
Closes the superviz-comments
section, where you can see the list of comments and reply to them.
function Room() {
const { closeThreads } = useComments();
function close() {
closeThreads();
}
return <button onClick={close}>Close Threads</button>
}
useCanvasPin
Hook
Exported
pin
Type: CanvasPin | null
A CanvasPin object
function Room() {
const { pin } = useCanvasPin({ canvasId: "mycanvas" });
return <Comments pin={pin} />;
}
destroy
Type: function
Destroy Pin object
function Room() {
const { pin, destroy } = useCanvasPin({ canvasId: "mycanvas" });
function destroyPin() {
destroy();
}
return (
<>
<Comments pin={pin} />
<button onclick={destroyPin}>Destroy</button>
</>
);
}
Parameters
canvasId
Type: Required
string
Specifies the ID of the canvas HTML element where comments can be added.
function Room() {
const { pin } = useCanvasPin({ canvasId: "mycanvas" });
return (
<Comments pin={pin} />
);
}
onGoToPin
Optional
(position: { x: number; y: number }) => void
An optional handler function for when a pin is clicked
function Room() {
const { pin } = useCanvasPin({
canvasId: "mycanvas",
onGoToPin: (position) => {
// Do something
},
});
return (
<Comments pin={pin} />
);
}