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