Custom UI- MessagesBox

Add your component within Root with this line:

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


  • display incoming and outgoing messages
  • send images
  • send gifs
  • send emojis
  • open a chat participant’s profile

Provided props

  • chat (string) ID of the chat that is open.
  • chatMinimised (boolean) if this is true, the component should not render anything to leave space for other components (such as user and chat profiles).
  • messages (array) all of the current chat’s messages.
  • users (object) all users and their profiles.
  • sendingMsg (boolean) can be used to display a loading animation while sending a message.
  • selectedImage (object) the image file that will be sent.
  • selectedImageURL (string) the URL of the image, which can be used to display it in a preview before sending.
  • closePreview (function) resets all state variables that have to do with images.
  • getUploadURL(e) (function) Sends an image to the chat. e is the button that calls this function, and the argument is used to disable that button after clicking it.
  • changeGif (function) resets all state variables that have to do with gifs.
  • sendGif (function) sends a gif to the chat.
  • gifUrl (string) URL of the gif the user has selected.
  • imageChanged(e) (function) takes the image file input as an argument. Sets the values for selectedImage and selectedImageURL.
  • chats (array) list of chats and their profiles. Can be used to determine if a chat is 1-on-1 or not.
  • changeUserProfile(id) (function) opens the profile of the user who’s ID is passed as argument. Can be placed as an on click event for the message sender in group chats.
  • setCaption(type, value) (function) used to update the container’s caption state for images and gifs. Type is either ‘imgCaption’ or ‘gifCaption’ and value is the caption string.
  • ui (object) used to decide the correct UI for emoji and gif buttons with the emojiPicker and searchGif properties, respectively.
  • addEmoji(code, data, inputElement) (function) adds the selected emoji to the input element by emoji code and data.
  • toggleOpenState(property) (function) used to change the values of emojiPicker and searchGif.
  • handleInputChange(e) (function) should be placed as the on change listener of the text input. e is the input element.
  • inputValue (string) the value to provide to the text input. This will change when the user writes something or adds an emoji.
  • handleKeyPress (function) should be placed as the on keypress listener or the text input. If the key is ‘Enter’, the message will be sent.
  • EmojiPicker (function) is the EmojiPicker component. Can be placed into your application in the following manner (if props.ui.emojiPicker is true):
  • sendMessage (function) can be added as an onClick event on a button to send the message.
  • setDimensions(e) (function) onLoad listener for the image preview tag to set the image dimensions correctly.
  • checkIfLoneEmoji(string) (function) returns true if the string is a lone emoji, for the purpose of displaying it bigger/differently. Otherwise returns false.
	<props.EmojiPicker onEmojiClick={(code, data) => {props.addEmoji(code, data, inputElem)}} />

Next: SearchGif