Nachos Preventing Motivation

    @sendbird/live-uikit-react
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0-beta.2 • Public • Published

    Sendbird Live UIKit for React

    minified size minzipped size npm version Commercial License


    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)

    Install

    npm i @sendbird/live-uikit-react

    Homepage

    sendbird.com

    DownloadsWeekly Downloads

    3

    Version

    1.0.0-beta.2

    License

    SEE LICENSE IN LICENSE.md

    Unpacked Size

    2.94 MB

    Total Files

    6

    Last publish

    Collaborators

    • sendbird