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

Name	Type	Description
`developerKey`	`string`	Required. 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.
`roomId`	`string`	Required. 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.
`group`	`Group`	Required. You can organize your participants into groups. Usually, a group is a company or organization. See the group section for more details.
`participant`	`Participant`	Required. User details of the participant in the room. See the Participant section for more details.
`customColors`	`ColorsVariables`	Object to customize the color scheme of your application. See the ColorsVariables section for more details. Default value: `undefined`
`debug`	`boolean`	Enable SDK logs in the browser console. Default value: `false`

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.

Name	Type	Description
`imageUrl`	`string`	Optional. Path to the thumbnail image of the 3D model. Supported formats: `.png` and `.jpg`.
`model3DUrl`	`string`	Optional. 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:

Name	Value	Component
`ComponentNames.COMMENTS`	`comments`	Contextual Comments
`ComponentNames.PRESENCE`	`presence`	Indicates that any presence component is active (Mouse-Pointers, Who-is-Online, or Real-time Data Engine).
`ComponentNames.PRESENCE_AUTODESK`	`presence3dAutodesk`	Presence 3D Autodesk
`ComponentNames.PRESENCE_MATTERPORT`	`presence3dMatterport`	Presence 3D Matterport
`ComponentNames.PRESENCE_THREEJS`	`presence3dThreejs`	Presence 3D Three.js
`ComponentNames.REALTIME`	`realtime`	Real-time Data Engine
`ComponentNames.VIDEO_CONFERENCE`	`videoConference`	Video Conference
`ComponentNames.WHO_IS_ONLINE`	`whoIsOnline`	Who-is-Online

`Group`

Type: object

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

Name	Type	Description
`id`	`string`	Optional. A unique ID that identifies the group. Usually, this ID matches your internal ID of a specific company or organization.
`name`	`string`	Optional. 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.

Name	Type	Description
`id`	`string`	Required. Identifier of the participant who is entering the room. Usually, this ID matches the internal ID of your users.
`avatar`	`Avatar`	Participant avatar information.
`name`	`string`	Required. 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>"
  },
}

Overview
How to use
Properties
Events
Type Definitions