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
Feature | Description |
---|---|
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
usesLiveEventListQuery
from Sendbird Live SDK to retrieve the list of live events from the Sendbird server. You can customizeLiveEventList
by setting the values of thecustomize.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 name | Type | Description |
---|---|---|
queryParams | LiveEventListQueryParams | Specifies the query parameters that the view uses to retrieve a list of live events. See |
renderTitle | () => React.ReactElement | Returns a title for a live event that the user has set. If not specified, the default title is returned. (Default: |
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: |
renderLiveEvent | (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: |
showStatusLabel | boolean | Determines whether to show the live event status. If set to |
showHostNickname | boolean | Determines whether to show the host's nickname. If set to |
String set
The following table lists the properties of stringSet
that you can customize to modify the live event list view.
Category | Key | String |
---|---|---|
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 |