@hiyve/react-room

Pre-built room components for Hiyve SDK — complete video conferencing in 5 lines of code.

Installation

npx @hiyve/cli login
npm install @hiyve/react-room
Copy

Peer Dependencies (Required)

npm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled @hiyve/react @hiyve/react-ui @hiyve/core @hiyve/rtc-client @hiyve/utilities
Copy

Peer Dependencies (Optional)

Install optional packages to enable additional sidebar tabs and features:

# Install all optional packages
npm install @hiyve/react-collaboration @hiyve/react-intelligence @hiyve/react-whiteboard @hiyve/react-notes @hiyve/react-assignments @hiyve/react-capture @hiyve/cloud
Copy

Quick Start

Minimal Setup

import { HiyveRoom, PrebuiltRoom } from '@hiyve/react-room';

function App() {
  const token = '...'; // from your signaling server

  return (
    <HiyveRoom roomToken={token}>
      <PrebuiltRoom onLeave={() => window.location.href = '/'} />
    </HiyveRoom>
  );
}
Copy

With Lobby Flow

import { useState } from 'react';
import { HiyveRoom, PrebuiltLobby, PrebuiltRoom } from '@hiyve/react-room';

function App() {
  const [joined, setJoined] = useState(false);
  const [name, setName] = useState('');
  const token = '...';

  if (!joined) {
    return (
      <PrebuiltLobby
        onJoin={(displayName) => {
          setName(displayName);
          setJoined(true);
        }}
        showPreview
      />
    );
  }

  return (
    <HiyveRoom roomToken={token}>
      <PrebuiltRoom userId={name} onLeave={() => setJoined(false)} />
    </HiyveRoom>
  );
}
Copy

Components

HiyveRoom Props

PrebuiltRoom Props

PrebuiltRoomSidebarConfig

PrebuiltLobby Props

RemoteCameraPage

A minimal, mobile-optimized full-screen page for joining a room as a video-only ghost participant. Designed to be opened on a phone after scanning a QR code from the desktop app. Shows a camera preview, a connect button, and minimal controls (flip camera and disconnect). Audio is always muted.

import { RemoteCameraPage } from '@hiyve/react-room';
import { HiyveRoom } from '@hiyve/react-room';

function CameraPage() {
  const params = new URLSearchParams(window.location.search);

  return (
    <HiyveRoom roomToken={params.get('joinToken')!}>
      <RemoteCameraPage
        joinToken={params.get('joinToken')!}
        region={params.get('region')!}
        ghostUserId={params.get('ghostUserId')!}
        onDisconnect={() => window.close()}
      />
    </HiyveRoom>
  );
}
Copy

RemoteCameraPage Props

RemoteCameraPage Labels

RemoteCameraPage Colors

Usage Examples

Basic Room

<HiyveRoom roomToken={token}>
  <PrebuiltRoom onLeave={handleLeave} />
</HiyveRoom>
Copy

Sidebar Configuration

Control which sidebar tabs are available:

<PrebuiltRoom
  onLeave={handleLeave}
  sidebar={{
    showParticipants: true,
    showChat: true,
    showPolls: true,
    showQA: true,
    showFiles: true,
    showWhiteboard: true,
    showNotes: true,
    showAssignments: true,
    showSearch: false,
    showIntelligence: false,
    defaultTab: 'chat',
  }}
/>
Copy

Sub-Component Customization

Customize the ControlBar, VideoGrid, and ParticipantList rendered inside PrebuiltRoom:

<PrebuiltRoom
  onLeave={handleLeave}
  controlBar={{
    showScreenShare: false,
    showHandRaise: true,
    showRecordingMenu: true,
    colors: { background: 'rgba(0, 0, 0, 0.9)' },
  }}
  videoGrid={{
    showNames: true,
    styles: { gap: 12, padding: 16 },
    colors: { dominantBorder: '#00ff88' },
  }}
  participantList={{
    showSpeakingIndicator: true,
  }}
/>
Copy

Custom Labels and Colors

<PrebuiltRoom
  onLeave={handleLeave}
  labels={{ roomTitle: 'Team Standup' }}
  colors={{
    appBarBackground: '#0d1b2a',
    appBarText: '#e0e0e0',
    background: '#1b263b',
  }}
  styles={{
    appBarHeight: 48,
    sidebarWidth: 400,
  }}
/>
Copy

Intelligence-Enabled Room

<HiyveRoom
  roomToken={token}
  cloudToken={cloudToken}
  userId="user-123"
  intelligence
>
  <PrebuiltRoom
    userId="user-123"
    onLeave={handleLeave}
    sidebar={{ showSearch: true, showIntelligence: true }}
  />
</HiyveRoom>
Copy

Custom Lobby

<PrebuiltLobby
  onJoin={handleJoin}
  defaultName="Guest"
  showPreview
  labels={{
    title: 'Welcome to the Meeting',
    joinButton: 'Enter Room',
    namePlaceholder: 'Your display name',
  }}
  colors={{
    background: '#0a0a1a',
    cardBackground: '#1a1a2e',
    primaryColor: '#4caf50',
  }}
/>
Copy

Sub-Component Customization

PrebuiltRoom renders ControlBar, VideoGrid, and ParticipantList from @hiyve/react-ui. You can pass props to each sub-component directly:

<PrebuiltRoom
  controlBar={{ /* ControlBar props */ }}
  videoGrid={{ /* VideoGrid props */ }}
  participantList={{ /* ParticipantList props */ }}
/>
Copy

Managed Props

PrebuiltRoom handles certain capabilities automatically. The following props are managed and cannot be overridden via passthrough:

Examples

Hide screen share and show hand raise:

<PrebuiltRoom
  onLeave={handleLeave}
  controlBar={{ showScreenShare: false, showHandRaise: true }}
/>
Copy

Customize video grid spacing and dominant speaker highlight:

<PrebuiltRoom
  onLeave={handleLeave}
  videoGrid={{
    styles: { gap: 16, padding: 20 },
    colors: { dominantBorder: '#ff6b35' },
  }}
/>
Copy

Pass labels to ControlBar for i18n:

<PrebuiltRoom
  onLeave={handleLeave}
  controlBar={{
    labels: {
      mute: 'Couper le micro',
      unmute: 'Activer le micro',
      shareScreen: 'Partager',
    },
  }}
/>
Copy

Customization

Labels (i18n)

import {
  defaultPrebuiltRoomLabels,
  mergePrebuiltRoomLabels,
  defaultPrebuiltLobbyLabels,
  mergePrebuiltLobbyLabels,
} from '@hiyve/react-room';

// Partial override
<PrebuiltRoom labels={{ roomTitle: 'Mon Salon' }} />

// Programmatic merge
const frenchLabels = mergePrebuiltRoomLabels({ roomTitle: 'Mon Salon' });
Copy

Colors

import { defaultPrebuiltRoomColors, mergePrebuiltRoomColors } from '@hiyve/react-room';

<PrebuiltRoom
  colors={{
    appBarBackground: '#1a237e',
    background: '#0d1117',
  }}
/>
Copy

Styles

import { defaultPrebuiltRoomStyles, mergePrebuiltRoomStyles } from '@hiyve/react-room';

<PrebuiltRoom styles={{ appBarHeight: 48, sidebarWidth: 320, sidebarVariant: 'temporary' }} />
Copy

Available style properties: appBarHeight (pixels), sidebarWidth (pixels), sidebarVariant ('persistent' or 'temporary' — persistent pushes content, temporary overlays).

Available Default/Merge Exports

Type Exports

All prop interfaces are exported for TypeScript consumers:

import type {
  HiyveRoomProps,
  PrebuiltRoomProps,
  PrebuiltRoomSidebarConfig,
  PrebuiltRoomLabels,
  PrebuiltRoomColors,
  PrebuiltRoomStyles,
  PrebuiltRoomControlBarConfig,
  PrebuiltRoomVideoGridConfig,
  PrebuiltRoomParticipantListConfig,
  PrebuiltLobbyProps,
  PrebuiltLobbyLabels,
  PrebuiltLobbyColors,
  RemoteCameraPageProps,
  RemoteCameraPageLabels,
  RemoteCameraPageColors,
} from '@hiyve/react-room';
Copy

Features

• Complete video conferencing room in 5 lines of code
• Provider composer handles theming, WebRTC connectivity, and optional AI features
• Pre-call lobby with device preview, device selection, and name input
• App bar with room title and live clock
• Tabbed sidebar with participants, chat, polls, Q&A, files, whiteboard, notes, assignments, search, and AI hub
• Sub-component customization for ControlBar, VideoGrid, and ParticipantList
• Sidebar tabs auto-hide when optional packages are not installed
• Full label, color, and style customization with merge functions
• Dark theme by default
• Layout switching (grid, speaker, sidebar modes)

Requirements

• Must be wrapped in HiyveRoom
• React 18+
• MUI v5 or v6 (@mui/material, @mui/icons-material) with Emotion
• @hiyve/react, @hiyve/react-ui, @hiyve/core, @hiyve/rtc-client, @hiyve/utilities as peer dependencies
• Optional: @hiyve/react-collaboration, @hiyve/react-intelligence, @hiyve/react-whiteboard, @hiyve/react-notes, @hiyve/react-assignments, @hiyve/react-capture, @hiyve/cloud

License

MIT