Custom UI- UserProfile

Add your component within Root with this line:

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


  • display and update user profile
  • display and update profile images
  • leave 1-on-1 chat
  • change the SDK’s language

Provided props

  • ownProfile (boolean) indicates whether the profile is the logged in user’s or another user’s.
  • profile (object) profile of the user.
  • updateCurrentChat (function) updates the currentChat value to the chat that was previously open. This is useful when the user has clicked on another user’s image or name in a conversation to open their profile. Provides an easy way back to the chat.
  • toggleUpdateState(property) (function) Property can be updateAvatarImg, updateCoverImg or updateProfile. Changes the value of the property, which can be in turn used to update the UI.
  • updateProfileFunc(e) (function) Updates the user’s profile. e is a form which contains the following profile fields: name, desc (description), gender, location and birthdate. All fields should be type='text' with the exception of ‘birthdate’, which should be type='date'.
  • updateProfile (string) indicates whether or not the profile form should be modifiable (whether or not the form inputs should be disabled).
  • chatLeave (function) can be used when the profile is not the logged in user’s. This would indicate that the profile belongs to a private chat’s other user, in which case the logged in user will leave the private chat.
  • changeLocalisationLanguage(e) (function) e is the input that is being watched for changes. Can be used to change the profile’s language.
  • lang (string) Language the user wishes to use for their profile. This is the value passed to the Root component.
  • updateImage(e, type) (function) onChange function for profile image file inputs. e is the input event and type is either 'avatar' or 'cover'.
  • searchable (bool) determines whether or not the logged in user is searchable by other users. Can be used to define the ‘checked’ value of a checkbox input.
  • toggleBool(property) takes the boolean property to toggle (in this case, searchable). Changes its value between true and false.

Next: UserInvites