Skip to content

Instantly share code, notes, and snippets.

@Tushkiz
Created February 8, 2024 12:53
Show Gist options
  • Save Tushkiz/8d1b16f0b079006f6ed1dfd5efcc5834 to your computer and use it in GitHub Desktop.
Save Tushkiz/8d1b16f0b079006f6ed1dfd5efcc5834 to your computer and use it in GitHub Desktop.
Breakout rooms sample app using Dyte react-ui-kit and react-web-core
/**
* required packages
* "@dytesdk/react-ui-kit": "^1.64.0",
* "@dytesdk/react-web-core": "^1.35.20",
*/
import { useEffect } from 'react';
import { useDyteClient } from '@dytesdk/react-web-core';
import { DyteBreakoutRoomsToggle, DyteDialogManager, DyteGrid } from '@dytesdk/react-ui-kit';
function BreakoutApp() {
const [meeting, initMeeting] = useDyteClient();
const url = new URL(window.location.href);
const queryToken = url.searchParams.get('authToken');
if (!queryToken) {
alert('Please add authToken to url query params');
}
useEffect(() => {
const init = async () => {
if (!queryToken) return;
await initMeeting({
authToken: queryToken,
defaults: {
video: false,
audio: false,
},
}).then(async (meet) => {
if (!meet) return;
await meet.join();
});
};
init();
}, []);
if (!meeting) {
return <div>Loading...</div>;
}
return (
<div>
<h1>{meeting.meta.meetingTitle}</h1>
<DyteDialogManager meeting={meeting} />
<div style={{ width: '500px', height: '300px' }}>
<DyteGrid meeting={meeting} />
</div>
<DyteBreakoutRoomsToggle meeting={meeting} />
</div>
);
}
export default BreakoutApp;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment