Skip to main content

Mouse Pointers

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

Before we start

Before utilizing the Mouse Pointers component, it is essential to initialize a room with a defined name and ID for the participant. You will also need an HTML element identified by a specific ID on your web page.

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 16 attendees.

How to use

To add the Mouse Pointers component to any HTML element on your web page, you will need to add an ID attribute to it and then, use the following code:


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

function Room() {
return (
<>
<div id="element-id"></div>
<MousePointers elementId="element-id"/>
</>
);
}

export default Room;

Properties

NameTypeDescription
elementIdstringRequired. Specify the ID of the HTML element where the "Mouse Pointers" component will be displayed.

useMouse Hook

transform

Type: (data: { translate?: { x?: number; y?: number }; scale?: number }): void

The transform allows you to change the initial position of the mouse pointer.

Example:

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

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

useEffect(() => {
transform({
translate: {
x: 100,
y: 100
},
scale: 1
});
}, []);

return (
<>
<div id="element-id"></div>
<MousePointers elementId="element-id"/>
</>
)
}

Parameters

NameTypeDescription
transformobjectThe transform property allows you to change the initial position of the mouse pointer.
transform.translateobjectThe x and y coordinates to move the mouse pointers.
transform.translate.xnumberThe x coordinate to move the mouse pointers.
transform.translate.ynumberThe y coordinate to move the mouse pointers.
transform.scalenumberThe scale to apply to the mouse pointers.

Events

onMount

Type: () => void

This event will be dispatched when the component has mounted and is initialized.

onUnmount

Type: () => void

This event will be dispatched when the component has been unmounted and destroyed.

onGoToPresence

Type: (position: Position) => void

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

Type Definitions

Position

Type: object

Position of the participant mouse pointer.

NameTypeDescription
xnumberThe x coordinate of the participant that is being followed.
ynumberThe y coordinate of the participant that is being followed.
scaleXnumberThe scale of the x coordinate of the participant that is being followed in comparison to the current user scale.
scaleYnumberThe 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
}