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

List live events

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

FeatureDescription

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.


Customization

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

queryParams

LiveEventListQueryParams

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

renderTitle

() => React.ReactElement

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

renderCreateButton

() => 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)

renderLiveEvent
Elem

(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)

showStatusLabel

boolean

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

showHostNickname

boolean

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

String set

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

CategoryKeyString

List view

LIST_HEADER_TITLE

Live events

List view

LIST_HEADER_BUTTON

Create

List view

LIST_EMPTY_DESCRIPTION

No live events

List view

LIST_HOST_NICKNAME_PLACEHOLDER

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