Overview

Sendbird Live UIKit for React allows you to create customizable views and execute essential live functions such as create a live event, list live events, host a live event and more. Unlike the UIKit for iOS and Android, Sendbird Live UIKit for React employs an <App> component, which contains all elements of the UI. When the <App> component is declared, the UIKit automatically connects a user to the Sendbird server using information it received as parameters. The following is a list of key functions which are provided in the <App> component.

The Live UIKit for React provides pre-built <App> components for the following functions.

If you don't want to use the default component provided by the Live UIKit, you can customize the UI components in the Live UIKit to best suit your needs. The following are the two major ways you can customize the components.

You can add option flags and variables to change the corresponding UIKit behaviors across the Live UIKit by modifying the public UI properties.

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

const MyApp = () => {
    const [customize] = useState({
        liveEventList: {
            showStatusLabel: true,
            showHostNickname: false,
        },
        createEventView: {
            showUserIdsForHostSelectionView: true,
        }
    })

    return (
        <SendbirdLiveApp
            appId={appId}
            userId={userId}
            customize={customize}
        />
    );
};

By changing the values of global sets such as stringSet, colorSet, iconSet, and fontSet, you can change the default values for strings, icons, colors and fonts in the Live UIKit respectively.

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

const MyApp = () => {
    const [stringSet] = useState({
        LIST_HEADER_TITLE: 'Live events',
        LIST_HEADER_BUTTON: 'Create',
        LIST_EMPTY_DESCRIPTION: 'No live events'
    });

    return (
        <SendbirdLiveApp
            appId={appId}
            userId={userId}
            stringSet={stringSet}
        />
    );
};