Custom UI- ChatList

Add your component within Root with this line:

<Delivered.ChatList render={props => <YourCustomComponent {...props} />} />


  • open a chat creation UI
  • change the active chat
  • open the chat search
  • open the logged in user’s profile

Provided props

  • chatCreateOpen (boolean) indicates whether or not the ChatCreate UI should be open. In the sample app, the ChatList UI is not displayed when its value is true in order to fit the chat creation UI. This, however, is optional and does not need to be used if the ChatList UI remains visible when creating a new chat.
  • publicChatCreateOpen (boolean) is similar to chatCreateOpen. If its value is true, the ChatList can optionally be hidden.
  • ownProfile (boolean) indicates whether or not the user profile is open. Can be used to modify the style of the profile button to show it is active.
  • changeUserProfile (function) changes the userProfile value to the ID of the logged in user. This function should be used as an onClick event for the user profile button.
  • ownUser (object) provides access to the logged in user’s information so it can be displayed in the user profile button.
  • profileNotifications (number) indicates the number of unseen notifications that have arrived while the user is online.
  • openProperty(property) (function) used to change the chatCreateOpen property to true.
  • chats (array) contains all the chats the user is part of and the time of the last message for each chat (lastMsgTime).
  • notifications (bject) contains possible notifications for the chats the user is part of.
  • messages (object) contains all the messages the user has sent and received. Can be used to display each chat’s last message.
  • toggleDebug (function) is used to toggle the debug value.
  • debug (boolean) indicates whether or not the DebugUI should be shown. Can be used to change the debug button’s text.
  • users (object) contains all contacts and users who have participated in one of the logged in user’s chats and their profiles.
  • removeChatNotifications(chat) (function) removes the argument chat’s notifications.
  • updateCurrentChat(chat) (function) updates the currentChat value with the ID of the argument chat. This is also used in several other components.
  • ui (object) contains the currentChat value. Can be used to differentiate the active chat from non-active ones.

Next: CreateChat