import { VideoAttachmentPreview } from "./AttachmentPreviews";
const CustomAttachmentPreviewList = () => (
<AttachmentPreviewList VideoAttachmentPreview={VideoAttachmentPreview} />
);
Attachment Previews in Message Input
In this section we will focus on how to customize attachment previews display in MessageInput
component. The attachment previews are rendered by AttachmentPreviewList
component.
Customize the rendering of default attachment previews
The default attachment types recognized by AttachmentPreviewList
are:
audio
video
image
voiceRecording
file
If the attachment object has property og_scrape_url
or title_link
, then it is rendered by LinkPreviewList
component and not AttachmentPreviewList
.
To customize attachment previews we need to override AttachmentsPreviewList
component.
And pass it to Channel
component.
<Channel AttachmentPreviewList={CustomAttachmentPreviewList} />
We can customize the following preview components:
AudioAttachmentPreview
FileAttachmentPreview
ImageAttachmentPreview
UnsupportedAttachmentPreview
VideoAttachmentPreview
VoiceRecordingPreview
Customize the rendering of custom attachment previews
It is possible to add custom attachments (objects) to composed messages via upsertAttachments
function provided by MessageInputContext
.
The custom attachments are not recognized by AttachmentPreviewList
component and therefore rendered via UnsupportedAttachmentPreview
component within AttachmentPreviewList
. The component UnsupportedAttachmentPreview
can be customized and handle all the custom attachment objects added to the message attachments.
import { GeolocationPreview } from "./GeolocationAttachmentPreview";
import type { UnsupportedAttachmentPreviewProps } from "stream-chat-react";
const CustomAttachmentsPreview = (props: UnsupportedAttachmentPreviewProps) => {
const { attachment } = props;
if (attachment.type === "geolocation") {
return <GeolocationPreview {...props} />;
}
// more conditions follow...
};
The custom component is then passed to custom AttachmentsPreviewList
component which purpose is just to specify the custom UnsupportedAttachmentPreview
component.
import { CustomAttachmentsPreview } from "./AttachmentPreviewList";
const CustomAttachmentPreviewList = () => (
<AttachmentPreviewList
UnsupportedAttachmentPreview={CustomAttachmentsPreview}
/>
);
<Channel AttachmentPreviewList={CustomAttachmentPreviewList} />