/ UIKit / JavaScript
UIKit
    Live UIKit JavaScript v1
    Live UIKit JavaScript
    Live UIKit
    JavaScript
    Version 1
    Home
    /
    Live
    /
    UIKit
    /
    JavaScript

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

    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

    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

    Copy link

    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.

    On this page
    Customization
    String set