Attachments

The Attachment component takes a list of message attachments and conditionally renders the UI of each individual attachment based upon its type. The following table shows the attachment UI components that will be rendered for various attachment types:

Attachment Type	UI Component	File type(s) (non-exhaustive)
audio	Audio	MP3, WAV, M4A, FLAC, AAC
file	File	DOC, DOCX, PDF, PPT, PPTX, TXT, XLS, XLSX
gallery	Gallery	when a message has more than 1 'image' type attachment
image	Image	HEIC, GIF, JPEG, JPG, PNG, TIFF, BMP
video	ReactPlayer	MP4, OGG, WEBM, Quicktime(QTFF, QT, or MOV)

Message attachments that do not conform to one of the above types are rendered with the Card component.

Basic Usage

By default, the Attachment component is included within MessageSimple. To render message attachment UI within a custom Message UI component, import the Attachment component and render it conditionally based upon the presence of message attachments.

const CustomMessage = () => {
  // consume `MessageContext`
  const { message } = useMessageContext();

  return (
    <div>
      {message.attachments && <Attachment attachments={message.attachments} />}
      // render remaining custom Message UI
    </div>
  );
};

<Chat client={client}>
  <Channel channel={channel} Message={CustomMessage}>
    <MessageList />
    <MessageInput />
  </Channel>
</Chat>;

UI Customization

Attachment accepts component override props for each attachment UI component. Building upon the previous example, the below snippet shows how to customize one of the individual attachment UI components.

const CustomImage = (props) => {
  // render custom image component here
};

const CustomMessage = () => {
  // consume `MessageContext`
  const { message } = useMessageContext();

  return (
    <div>
      {message.attachments && <Attachment attachments={message.attachments} Image={CustomImage} />}
      // render remaining custom Message UI
    </div>
  );
};

<Chat client={client}>
  <Channel channel={channel} Message={CustomMessage}>
    <MessageList />
    <MessageInput />
  </Channel>
</Chat>;

Props

Required

attachments

The message attachments to render, see Attachment Format in the general JavaScript docs.

Type
array

actionHandler

The handler function to call when an action is performed on an attachment, examples include canceling a /giphy command or shuffling the results.

Type
(dataOrName?: string | FormData, value?: string, event?: React.BaseSyntheticEvent) => Promise<void>

AttachmentActions

Custom UI component for displaying attachment actions.

Type	Default
component	AttachmentActions

Audio

Custom UI component for displaying an audio type attachment.

Type	Default
component	Audio

Card

Custom UI component for displaying a card type attachment.

Type	Default
component	Card

File

Custom UI component for displaying a file type attachment.

Type	Default
component	File

Gallery

Custom UI component for displaying a gallery of image type attachments.

Type	Default
component	Gallery

Image

Custom UI component for displaying an image type attachment.

Type	Default
component	Image

Media

Custom UI component for displaying a video type attachment, defaults to use the react-player dependency.

Type	Default
component	ReactPlayer