Room Kit React Library

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

Installation

// npm
npm install @100mslive/roomkit-react@latest --save

// yarn
yarn add @100mslive/roomkit-react@latest

Usage

Using room code

import { HMSPrebuilt } from '@100mslive/roomkit-react'

export default App() {
    return (
        <HMSPrebuilt roomCode={<room-code>} />
    );
}

Using authToken

import { HMSPrebuilt } from '@100mslive/roomkit-react'

export default App() {
    return (
        <HMSPrebuilt authToken={<auth-token>} />
    );
}

For additional props, refer the docs

Customisation

While we offer a no-code way to customize Prebuilt, you can fork your copy of the Prebuilt component and make changes to the code to allow for more fine-tuning.

Prebuilt customisations are available on 100ms Dashboard.

Understanding the Structure

The src folder contains all the components, Button, Accordion etc. The Prebuilt folder contains the full Prebuilt implementation. App.tsx is the entry point for the Prebuilt which contains the HMSPrebuilt component.

Major Components in Prebuilt

| Component | Description | | ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | RoomLayoutProvider | This is a context that contains the configuration from the dashboard customiser. Whatever changes are made in the dashboard customiser are available the next time you join. | | AppStateContext | Contains the logic to switch between different screens, for example, Preview to Meeting, Meeting to Leave. These transitions are based on the roomState that is available from the reactive store (useHMSStore(selectHMSRoomState)). | | PreviewScreen | Contains the Preview implementation. Contains the Video tile, video, audio toggles and Virtual background and settings along with the name input. | | ConferenceScreen | This contains the screen once you finish Preview and enter the meeting. This contains the header and footer and the main content. | | VideoStreamingSection | This is the component that contains the main video rendering components and a sidebar (Interactive features like Chat and Polls are displayed here) | | LeaveScreen | This is the screen that is shown when you leave the meeting |

Customising the Styles

Base Config has all the variables that you can use. Any changes you want for the theme can be made here. Most likely no additional changes will be required unless you want to introduce new variables.

When HMSThemeProvider is used at the top level, all the variables will be available for all the children under this component tree.

For components created using the base components like Box, Flex, Button etc, css Prop is available to modify the styles. Within the css prop, you can access the variables from the base config.

Contributing

• Make sure whatever new Component/file you create is in Typescript.

• Don't forget to add data-testid for actionables like buttons, menus etc.

• Setup proper tooling (ESLint and Prettier) in your editor.

• yarn lint will be run before you push the changes, so whenever a push fails, check if there are any lint errors.

Read this doc for the coding guidelines.

Community & Support

• GitHub Issues - Submit any bugs or errors you encounter using the Web SDKs.
• Dashboard - ask questions to get help from the 100ms team.
• Contact - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform.