Sendbird Live UIKit for React is a set of prebuilt UI components that allows you to easily craft an in-app livestream with the essential streaming features including real-time chat. Our development kit includes UI components which you can customize to create an engaging live event experience for users.
Follow the guide below to start your live event with our easy to use UI components in
React. This library isn't designed to work with other frameworks such as
Angular. If you would like to build using the Live SDK only, refer to Sendbird Live SDK.
The minimum requirements for the Live UIKit for React are:
React 16.8.0 or higher
React DOM 16.8.0 or higher
WebRTC API supported browsers
Sendbird Live UIKit is an add-on to Sendbird Live SDK which provides live streaming feature and uses open channels for chat from Sendbird Chat SDK. Installing the Live UIKit will automatically install the Live SDK and the Chat SDK.
Before installing the Live UIKit, create a Sendbird account to acquire an application ID which you will need to initialize the Live UIKit. Go to Sendbird Dashboard and create an application by selecting Calls+Live in product type. Once you have created an application, go to Overview and you will see the Application ID.
You can start building your first live event by installing the Live UIKit. When you install the Live UIKit, Sendbird Live SDK will be installed implicitly.
You can install the Live UIKit for React through
npm. Enter the following code on the command line with
npm. The minimum requirements listed above must be installed on your system to use
Note: If you have already been using Sendbird Chat or want to know the minimum version of the Chat SDK to use the Live UIKit, you can check the information in Sendbird Live SDK.
yarn, enter the following command.
An example of a
tsconfig.json file should look like the following.
Next, import the Live UIKit components to your app.
Once you're done installing Sendbird Live UIKit, you can now implement it to your web app by using the
App component. The
App component is a group of essential UI components needed to build a functioning streaming interface.
Add the following pattern to your project to use the
Specify the dimensions of your chat interface.
You can now run the web app to start streaming. First, create a live event by selecting the Create button in the top-left corner. Then, you can set the title and cover image, and add users who can take turns being a host for your live event. After the live event has been created, start the live event by selecting the Start live event button in the bottom-right corner. Once the live event has started, you can share your media stream and chat with the participants.
App component is a collection of all the Live UIKit components needed to quickly implement a basic live event, and only requires
userId to configure.
The unique ID of the application.
The unique ID of the user.
An opaque string that identifies the user. It is recommended that every user has their own access token and provides it upon login for security. (Default:
The set of strings for the Live UIKit components. This can override the default language. (Default:
The set of colors used in the Live UIKit themes. This can override the default theme. (Default:
The set of images for the Live UIKit components. This can override the default images. (Default:
The set of fonts for the Live UIKit components. This can override the default fonts. (Default:
The set of objects that customize each component in