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 UsageBy 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 CustomizationAttachment
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>;
#
PropsRequired attachments#
The message attachments to render, see Attachment Format in the general JavaScript docs.
Type |
---|
array |
#
actionHandlerThe 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> |
#
AttachmentActionsCustom UI component for displaying attachment actions.
Type | Default |
---|---|
component | AttachmentActions |
#
AudioCustom UI component for displaying an audio type attachment.
Type | Default |
---|---|
component | Audio |
#
CardCustom UI component for displaying a card type attachment.
Type | Default |
---|---|
component | Card |
#
FileCustom UI component for displaying a file type attachment.
Type | Default |
---|---|
component | File |
#
GalleryCustom UI component for displaying a gallery of image type attachments.
Type | Default |
---|---|
component | Gallery |
#
ImageCustom UI component for displaying an image type attachment.
Type | Default |
---|---|
component | Image |
#
MediaCustom UI component for displaying a video type attachment, defaults to use the react-player
dependency.
Type | Default |
---|---|
component | ReactPlayer |