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
Name | Type | Description |
---|---|---|
elementId | string | Required. 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
Name | Type | Description |
---|---|---|
transform | object | The transform property allows you to change the initial position of the mouse pointer. |
transform.translate | object | The x and y coordinates to move the mouse pointers. |
transform.translate.x | number | The x coordinate to move the mouse pointers. |
transform.translate.y | number | The y coordinate to move the mouse pointers. |
transform.scale | number | The 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.
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
}