From 2ad5d923822ec915c0dc308add70854e5b66d2df Mon Sep 17 00:00:00 2001
From: Andreas Bovens <andreas.bovens@whereby.com>
Date: Fri, 14 Aug 2026 16:05:54 +0100
Subject: [PATCH] Fix stale Browser SDK quick-start sample code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useRoomConnection no longer returns a `components` object in
@whereby.com/browser-sdk v3.29 — VideoView is now a top-level import
from @whereby.com/browser-sdk/react — and the state field is
`connectionStatus`, not `connectionState`. Update all quick-start
code samples accordingly.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../react-based-browser-sdk/quick-start.md    | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/whereby-for-web-browser/react-based-browser-sdk/quick-start.md b/whereby-for-web-browser/react-based-browser-sdk/quick-start.md
index 91e267c..02cf86e 100644
--- a/whereby-for-web-browser/react-based-browser-sdk/quick-start.md
+++ b/whereby-for-web-browser/react-based-browser-sdk/quick-start.md
@@ -41,7 +41,7 @@ The Browser SDK centers around the `useRoomConnection` hook, which manages the c
 
 ```javascript
 import React, { useEffect } from "react";
-import { useRoomConnection } from "@whereby.com/browser-sdk/react";
+import { useRoomConnection, VideoView } from "@whereby.com/browser-sdk/react";
 ```
 
 2. **Set up the room connection**:
@@ -50,16 +50,15 @@ import { useRoomConnection } from "@whereby.com/browser-sdk/react";
 const ROOM_URL = "https://your-subdomain.whereby.com/your-room-id";
 
 function MyVideoApp() {
-  const { state, actions, components } = useRoomConnection(ROOM_URL, {
+  const { state, actions } = useRoomConnection(ROOM_URL, {
     localMediaOptions: {
       audio: true,
       video: true,
     }
   });
 
-  const { connectionState, localParticipant, remoteParticipants } = state;
+  const { connectionStatus, localParticipant, remoteParticipants } = state;
   const { joinRoom, leaveRoom } = actions;
-  const { VideoView } = components;
 
   useEffect(() => {
     joinRoom();
@@ -126,7 +125,7 @@ function MyVideoApp() {
   const [isCameraOn, setIsCameraOn] = React.useState(true);
   const [isMicrophoneOn, setIsMicrophoneOn] = React.useState(true);
   
-  const { state, actions, components } = useRoomConnection(ROOM_URL, {
+  const { state, actions } = useRoomConnection(ROOM_URL, {
     localMediaOptions: {
       audio: true,
       video: true,
@@ -135,7 +134,6 @@ function MyVideoApp() {
 
   const { localParticipant, remoteParticipants } = state;
   const { joinRoom, leaveRoom, toggleCamera, toggleMicrophone } = actions;
-  const { VideoView } = components;
 
   useEffect(() => {
     joinRoom();
@@ -184,7 +182,7 @@ Here's a fully functional video app that demonstrates the core Browser SDK featu
 
 ```javascript
 import React, { useEffect, useState } from "react";
-import { useRoomConnection } from "@whereby.com/browser-sdk/react";
+import { useRoomConnection, VideoView } from "@whereby.com/browser-sdk/react";
 
 const ROOM_URL = "https://your-subdomain.whereby.com/your-room-id";
 
@@ -201,23 +199,22 @@ function MyVideoApp() {
   const [isCameraOn, setIsCameraOn] = useState(true);
   const [isMicrophoneOn, setIsMicrophoneOn] = useState(true);
   
-  const { state, actions, components } = useRoomConnection(ROOM_URL, {
+  const { state, actions } = useRoomConnection(ROOM_URL, {
     localMediaOptions: {
       audio: true,
       video: true,
     }
   });
 
-  const { localParticipant, remoteParticipants, connectionState } = state;
+  const { localParticipant, remoteParticipants, connectionStatus } = state;
   const { joinRoom, leaveRoom, toggleCamera, toggleMicrophone } = actions;
-  const { VideoView } = components;
 
   useEffect(() => {
     joinRoom();
     return () => leaveRoom();
   }, [joinRoom, leaveRoom]);
 
-  if (connectionState === "connecting") {
+  if (connectionStatus === "connecting") {
     return <div>Connecting to room...</div>;
   }