Skip to main content

Initialization

Overview

The SuperVizRoomProvider component serves as the foundational element that enables real-time, multi-user interactions within your application. By integrating this component, you establish a virtual space—referred to as a "room"—where participants can join, interact, and collaborate seamlessly. The SuperVizRoomProvider acts as a context provider at the top level of your application, ensuring that all child components have access to the room's state, events, and functions necessary for creating a collaborative environment.

How to use

To start using a room, you’ll need to import the SuperViz React SDK library and then add and configure the SuperVizRoomProvider component.

To add a room to your web page, use the following code:

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

function App() {

return (
<SuperVizRoomProvider
developerKey="<developerkey>"
group={{
id: "<group-id>",
name: "<group-name>",
}}
participant={{
id: "<user-id>",
name: "<user-name>",
}}
roomId="<room-id>"
>
<h1>This is a room</h1>
</SuperVizRoomProvider>
);
}

export default App;


Properties

NameTypeDescription
developerKeystringRequired. Your Developer KEY. If you don’t have a Developer KEY, you can see how to obtain one on the developer portal in our "Setting Up Your Account" section in our documentation.
roomIdstringRequired. This is a unique ID that you can create on your end. Using the same ID you will be able to enter the same room.
groupGroupRequired. You can organize your participants into groups. Usually, a group is a company or organization. See the group section for more details.
participantParticipantRequired. User details of the participant in the room. See the Participant section for more details.
customColorsColorsVariablesObject to customize the color scheme of your application. See the ColorsVariables section for more details.

Default value: undefined
debugbooleanEnable SDK logs in the browser console.

Default value: false
stopAutoStartbooleanStops the room from starting automatically when the component is mounted. When using true, you'll need to start the room manually using the startRoom.

Default value: false


Default value: false

useSuperViz Hook

startRoom

Type: () => void

It gives the user control over when to start the room and connects the local participant to the room.

To complement this, there is a parameter when creating the room provider, the stopAutoStart.

Example:


const { startRoom } = useSuperViz();

return (
<button onClick={startRoom}>Start Room</button>
)

stopRoom

Type: () => void

It gives the user control over when to stop the room and disconnects the local participant from the room.

Example:


const { stopRoom } = useSuperViz();

return (
<button onClick={stopRoom}>Stop Room</button>
)

hasJoinedRoom

Type: boolean

It returns a boolean value indicating whether the local participant has joined the room, indicating that the room is active.

Example:


const { hasJoinedRoom } = useSuperViz();

return (
<div>{hasJoinedRoom ? "Room is active" : "Room is not active"}</div>
)

Events

onParticipantLocalJoined

Type: (participant: Participant) => void

This event will be dispatched when the local participant enters the room.

Example:

const onParticipantLocalJoined = (participant) => {
console.log("Local participant joined", participant);
};

return (
<SuperVizRoomProvider
...
onParticipantLocalJoined={onParticipantLocalJoined}>

</SuperVizRoomProvider>
)

onParticipantLocalUpdated

Type: (participant: Participant) => void

This event will be dispatched when there is any change to the local participant.

Example:

const onParticipantLocalUpdated = (participant) => {
console.log("Local participant updated", participant);
};

return (
<SuperVizRoomProvider
...
onParticipantLocalUpdated={onParticipantLocalUpdated}>

</SuperVizRoomProvider>
)

onParticipantLocalLeft

Type: (participant: Participant) => void

This event will be dispatched when the local participant leaves the room.

Example:

const onParticipantLocalLeft = (participant) => {
console.log("Local participant left", participant);
};

return (
<SuperVizRoomProvider
...
onParticipantLocalLeft={onParticipantLocalLeft}>

</SuperVizRoomProvider>
)

onParticipantJoined

Type: (participant: Participant) => void

This event is dispatched when any participant enters the room.

Example:

const onParticipantJoined = (participant) => {
console.log("Participant joined", participant);
};

return (
<SuperVizRoomProvider
...
onParticipantJoined={onParticipantJoined}>

</SuperVizRoomProvider>
)

onParticipantListUpdated

Type: (participant: Participant) => void

This event is dispatched whenever there is a change to the list of participants in the room.

Example:

const onParticipantListUpdated = (participant) => {
console.log("Participant list updated", participant);
};

return (
<SuperVizRoomProvider
...
onParticipantListUpdated={onParticipantListUpdated}>

</SuperVizRoomProvider>
)

onParticipantLeft

Type: (participant: Participant) => void

This event is dispatched when any participant leaves the meeting room.

Example:

const onParticipantLeft = (participant) => {
console.log("Participant left", participant);
};

return (
<SuperVizRoomProvider
...
onParticipantLeft={onParticipantLeft}>

</SuperVizRoomProvider>
)

Type Definitions

Avatar

Type: object

While the SuperViz SDK provides a range of default 3D avatars for meetings, you have the flexibility to enrich this experience by adding your custom avatar for participants.

NameTypeDescription
imageUrlstringOptional.

Path to the thumbnail image of the 3D model.
Supported formats: .png and .jpg.
model3DUrlstringOptional.

Path to a 3D model. Only applicable when using Presence3D components
Supported formats: .glb and .gltf.

Example:

avatar: {
"imageUrl": "https://<PATH>",
"model3DUrl": "https://<PATH>",
}
tip

If you don’t have an avatar you can use the default avatars that we provide in the meeting setup, or you can create them on our Ready Player Me, as our code is optimized to work with their 3D models.

ColorsVariables

Type: object

Default value: SuperViz default colors.

You can customize the color scheme to create your theme. The color variables are represented as RGB values. For additional information on how to personalize, please refer to the documentation on how to theme your application.

Example:

customColors: {
'sv-primary-900': '16 29 70',
'sv-primary-200': '141 164 239',
'sv-primary': '58 92 204',
'sv-gray-800': '250 250 252',
'sv-gray-700': '233 229 239',
'sv-gray-600': '201 196 209',
'sv-gray-500': '174 169 184',
'sv-gray-400': '126 122 136',
'sv-gray-300': '87 83 95',
'sv-gray-200': '57 54 62',
'sv-gray-100': '38 36 42',
}

ComponentNames

Type: enum

List of possible components that a participant can be added to. This is a read-only property, to add a participant into a component, you should use the addComponent method of the room. The options are:

NameValueComponent
ComponentNames.COMMENTScommentsContextual Comments
ComponentNames.PRESENCEpresenceIndicates that any presence component is active (Mouse-Pointers, Who-is-Online, or Real-time Data Engine).
ComponentNames.PRESENCE_AUTODESKpresence3dAutodeskPresence 3D Autodesk
ComponentNames.PRESENCE_MATTERPORTpresence3dMatterportPresence 3D Matterport
ComponentNames.PRESENCE_THREEJSpresence3dThreejsPresence 3D Three.js
ComponentNames.REALTIMErealtimeReal-time Data Engine
ComponentNames.VIDEO_CONFERENCEvideoConferenceVideo Conference
ComponentNames.WHO_IS_ONLINEwhoIsOnlineWho-is-Online

Group

Type: object

You can organize your participants into groups, typically representing companies or organizations.

NameTypeDescription
idstringOptional. A unique ID that identifies the group. Usually, this ID matches your internal ID of a specific company or organization.
namestringOptional. The name of the group.

Example:

group: {
id: "<GROUP-ID>",
name: "<GROUP-NAME>",
}

Participant

Type: object

An object describing the participant information, like name and avatar.

NameTypeDescription
idstringRequired. Identifier of the participant who is entering the room. Usually, this ID matches the internal ID of your users.
avatarAvatarParticipant avatar information.
namestringRequired. The name of the participant who will enter the room.

Example:

participant: {
id: "<USER_ID>",
name: "<USER_ID>",
avatar: {
imageUrl: "https://<PATH>",
model3DUrl: "https://<PATH>"
},
}