Mouse Pointers

The Real-time Mouse Pointers feature enables real-time tracking of participants' cursor movements, allowing seamless collaboration within the same room.

How to use

To intitialize the Mouse Pointers component, you can follow our quickstart guide.

Using the Mouse Pointers in a canvas element

If you use the canvas element, the mouse will be displayed on the canvas element, it will consider its size and position to display the mouse pointer.

Participant limits

It's important to note that the room supports up to 25 attendees.

Usage

When initializing the Mouse Pointers, you can pass the following properties:

import { MousePointers } from "@superviz/react-sdk";

<SuperVizRoomProvider
  developerKey={DEVELOPER_KEY}
  group={{
    id: groupId,
    name: groupName,
  }}
  participant={{
    id: participant,
    name: "John " + participant,
  }}
  roomId={groupId}
>
  <div id="element-id"></div>

  <MousePointers
    elementId="element-id"
    onMount={() => {}}
    onUnmount={() => {}}
    onGoToPresence={(position) => {}}
  />
</SuperVizRoomProvider>;

See below the parameters to use when initializing the Mouse Pointers:

Name	Type	Description
elementId	string	Required. Specify the ID of the HTML element where the "Mouse Pointers" component will be displayed.

Hook

The useMouse hook allows you to access to interact with the Mouse Pointers component in a React component. All hooks should be inside the SuperVizRoomProvider component.

import { useMouse } from "@superviz/react-sdk";

function YourComponent() {
  const { isReady, transform } = useMouse();
}

isReady

Type: boolean

This property returns true when the Mouse Pointers component is ready to be used.

Example:

const { isReady } = useMouse();

if (isReady) {
  console.log("Mouse Pointers is ready");
}

transform()

Type: function

The transform allows you to change the initial position of the mouse pointer. We recommend using this method inside the useEffect hook to avoid unnecessary re-renders.

This function doesn't return anything.

Example:

const { transform } = useMouse();

transform({
  translate: {
    x: 100,
    y: 100,
  },
  scale: 1,
});

Parameters

Name	Type	Description
translate	object	The x and y coordinates to move the mouse pointers.
translate.x	number	The x coordinate to move the mouse pointers.
translate.y	number	The y coordinate to move the mouse pointers.
scale	number	The scale to apply to the mouse pointers.

Events

onMount

Type: function

This event will be dispatched when the component has mounted and is initialized. This function doesn't return anything.

Example:

const onMountCallback = () => {
  console.log("Mouse Pointers is ready");
};

return <MousePointers elementId="element-id" onMount={onMountCallback} />;

onUnmount

Type: function

This event will be dispatched when the component has been unmounted and destroyed. This function doesn't return anything.

Example:

const onUnmountCallback = () => {
  console.log("Mouse Pointers has been unmounted");
};

return <MousePointers elementId="element-id" onUnmount={onUnmountCallback} />;

onGoToPresence

Type: function

This event will be dispatched once a participant starts following another participant on the Who-is-Online component.

Example:

const onGoToPresenceCallback = (position) => {
  console.log("X position: " + position.x);
  console.log("Y position: " + position.y);
};

return (
  <MousePointers
    elementId="element-id"
    onGoToPresence={onGoToPresenceCallback}
  />
);

Received parameters

Name	Type	Description
position	Position	The position of the participant that is being followed.

Type Definitions

Position

Type: object

Position of the participant mouse pointer.

Name	Type	Description
x	number	The x coordinate of the participant that is being followed.
y	number	The y coordinate of the participant that is being followed.
scaleX	number	The scale of the x coordinate of the participant that is being followed in comparison to the current user scale.
scaleY	number	The scale of the y coordinate of the participant that is being followed in comparison to the current user scale.

Example:

{
  x: 100,
  y: 200,
  scaleX: 1,
  scaleY: 1
}