@sendbird/live-uikit-react

Sendbird Live UIKit for React

---

Requirements

The minimum requirements for UiKit for React are:

• React 16.8.0 or higher
• React DOM 16.8.0 or higher
• WebRTC API supported browsers

---

Before you start

Sendbird UIKit for Live is an add-on to Sendbird Live SDK which provides live streaming feature and uses open channels from Sendbird Chat SDK for chat. Installing the Sendbird UiKit for Live will automatically install the Live SDK and the Chat SDK.

Before installing Sendbird UIKit for Live, create a Sendbird account to acquire an application ID which you will need to initialize the 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.

---

Get Started

You can start building your first live event by installing UIKit for Live. When you install the UiKit for Live, Sendbird Live SDK will be installed implicitly.

Step 1 Install the UIKit

You can install 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 npm.

Note: If you have already been using Sendbird Chat, the minimum version of the Chat SDK must be equal or greater than [minimum version specified by Live SDK].

npm i @sendbird/live-uikit-react

When using yarn, enter the following command.

yarn add @sendbird/live-uikit-react

An example of a tsconfig file should look like the following:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "esModuleInterop": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Next, import UIKit components to your app.

import { App as SendbirdLiveApp } from "@sendbird/live-uikit-react";

Step 2 Implement UIKit to your web app

Once you're done installing Sendbird UIKit for Live, 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 use the App component:

import { App as SendbirdLiveApp } from "@sendbird/live-uikit-react";

const App = () => {
    return (
        <div className="App">
            <SendbirdLiveApp
                // Add the two lines below.
                appId={YOUR_APP_ID}   // Specify your Sendbird application ID.
                userId={USER_ID}        // Specify your user ID.
            />
        </div>
    );
};

Specify the dimensions of your chat interface.

.App {
  height: 100vh;   // Add this line.
  width: 100vw;   // Add this line.
}

Step 3 Start you first live

You can now run the app to start a streaming. First, create a live event by clicking on the icon in the top-left corner. Then, you can set the title and cover image, and hosts for your live event. After the live event has been created, start the live event by clicking on the icon in the bottom-right corner. Once the live event started, broadcast yourself and chat with the participants.

[insert gif here]

You've successfully started your first live with SendbirdLive.

App

The App component is a collection of all UIKit components needed to quickly implement a basic live, and only requires the app ID and user ID to be configured.

List of property

Required	Type	Description
appId	string	The APP_ID of the Sendbird application.
userId	string	The unique ID of the user.

Optional	Type	Description
accessToken	string	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: null)
stringSet	object	The set of strings for UIKit components. This can override the default language. (Default: null)
colorSet	object	The set of colors used in the UIKit themes. This can overrides the default theme. (Default: null)
imageSet	object	The set of images for UIKit components. This can override the default images. (Default: null)
fontSet	object	The set of fonts for UIKit components. This can override the default fonts. (Default: null)
customize	object	The set of objects that customize each components in App. (Default: null)

customize.liveEventList

Optional	Type	Description
queryParams	LiveEventListQueryParams	The query parameters that the view will use to retrieve live event list. (Default: { limit: 10 })
renderTitle	() => React.ReactElement	The function that returns alternative title element. (default: null)
renderCreateButton	() => React.ReactElement	The function that returns alternative create live event button element. (default: null)
renderLiveEventElem	(props: { liveEvent: LiveEvent }) => React.ReactElement	The function that returns alternative live event cell in the list view. (default: null)
showStatusLabel	boolean	The boolean to show status label (Default: true)
showHostNickname	boolean	The boolean to show host nickname (Default: true)

customize.liveEventView

Optional	Type	Description
showDuration	boolean	The boolean to show duration while the live event is ongoing (Default: true)
onEndEventClick	(props: { onClick: () => void }) => void	The callback that is fired when end event button (Default: null)
showStatusLabel	boolean	The boolean to show status label (Default: true)
showParticipantCount	boolean	The boolean to show participant count (Default: true)
eventEndViewDisplayTime	number	The millisecond number that determine how long live event end view will be displayed.

customize.hostView

Optional	Type	Description
allowExitWithoutEnding	boolean	The boolean to allow the host exit without end the live event (Default: true)
showEventSummaryView	boolean	The boolean to show the summary view after when the live event ends (Default: true)

customize.CreateEventView

Optional	Type	Description
showUserIdsForHostSelectionView	boolean	The boolean to show the user ids for host selection view. (Default: true)
renderCustomEventHostView	(props:{ userId: string;nickname?: string; profileUrl?: string; hideProfile?: boolean; onRemove?: (userId: string) => void; }	The function that returns alternative event host view element. (default: null)