Live JavaScript v1
Live JavaScript
Live
JavaScript
Home
/
Live
/
JavaScript

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.

List of key functions

Key functionDescription

List live events

Allows a user to list live events, and create, and enter a live event.

Create a live event

Allows a user to create and enter a live event.

Host a live event

Allows a user to select users to host, start and end a live event, and manage media during a live event.

View a live event

Allows a user to watch and chat in a live event.


Customization

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.

Behavior customization

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}
        />
    );
};

Style customization

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}
        />
    );
};