Skip to main content

Quickstart

Quickly get started with React UI Kit, with just a few lines of code!

First you would need to setup your project with the provided hooks and the <DyteProvider />.

export default function App() {
const [meeting, initMeeting] = useDyteClient();

useEffect(() => {
initMeeting({
roomName: '<room-name>',
authToken: '<auth-token>',
defaults: {
audio: false,
video: false,
},
});
}, []);

return (
<DyteProvider value={meeting}>
<MyMeeting />
</DyteProvider>
);
}

Read more about these hooks here.

Then, your <MyMeeting /> component would look like this.

info

The live editors you see in the docs use a mock web-core meeting object with the help of <DyteProvider />

tip

Try adding showSetupScreen={true} prop on <DyteMeeting /> to enable the Setup Screen.