Live UIKit JavaScript v1
Live UIKit JavaScript
Live UIKit
Version 1

List live events

Copy link

Through the <App> component's LiveEventList, a user can list, create, and enter a live event. When the <App> component is declared, the UIKit automatically connects a user to the Sendbird server using information it received as parameters. Once the client app is connected to the Sendbird server, LiveEventList displays a list of live events.

See the table below to see what features are available in LiveEventList.

List of features

Copy link

Create a live event

Creates a new live event.

Enter a live event

Allows a user to enter a live event.

Show a list of live events

Displays a list of live events in the application.

Note: LiveEventList uses LiveEventListQuery from Sendbird Live SDK to retrieve the list of live events from the Sendbird server. You can customize LiveEventList by setting the values of the customize.LiveEventList.queryParams object in the App component's props. Otherwise, the default values for the query are used.


Copy link

LiveEventList is composed of header and list components. The header component consists of a header title and an action button on the right. The list component is an area located below the header where the list view shows the live event information using LiveEventElem.

The following table lists a set of customizable properties of LiveEventList. These properties can be set in the customize.LiveEventList object in the App component's props.

Property nameTypeDescription



Specifies the query parameters that the view uses to retrieve a list of live events. See LiveEventListQueryParams for the full list of parameters.


() => React.ReactElement

Returns a title for a live event that the user has set. If not specified, the default title is returned. (Default: null)


() => React.ReactElement

Returns a custom create live event button element that the user has set. If not specified, the default create live event button is returned. (Default: null)


(props: { liveEvent: LiveEvent }) => React.ReactElement

Returns a custom live event cell that the user has set in the list view. If not specified, the default live event cell is returned. (Default: null)



Determines whether to show the live event status. If set to true, the live event status is displayed. (Default: true)



Determines whether to show the host's nickname. If set to true, the host's nickname is displayed. (Default: true)

String set

Copy link

The following table lists the properties of stringSet that you can customize to modify the live event list view.


List view


Live events

List view



List view


No live events

List view


* If there is no host, the placeholder is empty.