ChannelPreview UI
The ChannelPreview UI component receives props via the ChannelPreview
wrapper, and
these props are a combination of the ChannelPreview
props with additional UI specific items. The wrapper also handles the required logic
while the UI component is responsible for the UI display and the click functionality for channel selection.
This UI component is set via the Preview
prop on ChannelList
, and if nothing is provided then the default is used, ChannelPreviewMessenger
.
Basic Usage
This UI component is very customizable; below is an example of how to use the Preview
prop, and for a more involved step-by-step guide, using the many provided props,
see ChannelPreview Code Example.
const YourCustomChannelPreview = (previewProps) => {
// render custom preview info here
return <YourCustomChannelPreview {...previewProps} />;
};
<ChannelList Preview={YourCustomChannelPreview} />;
Props
Required channel
This required prop is the channel to be previewed; comes from either the channelRenderFilterFn
or usePaginatedChannels
call from
ChannelList and does not need to be set manually.
Type |
---|
Channel |
active
If the component's channel is the active (selected) channel.
Type |
---|
boolean |
activeChannel
The currently selected channel object.
Type |
---|
Channel |
Avatar
The custom UI component to display the avatar for the channel.
Type | Default |
---|---|
component | Avatar |
channelUpdateCount
A number that forces the update of the preview component on channel update.
Type |
---|
number |
className
Custom class for the channel preview root
Type |
---|
string |
displayImage
Image of channel to display.
Type |
---|
string |
displayTitle
Title of channel to display.
Type |
---|
string |
lastMessage
The last message received in a channel.
Type |
---|
StreamMessage |
latestMessage
Latest message preview to display. Will be either a string or a JSX.Element rendering markdown.
Type |
---|
string | JSX.Element |
messageDeliveryStatus
Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. The value is calculated from channel.read
data on mount and updated on every message.new
resp. message.read
WS event.
Type |
---|
MessageDeliveryStatus |
Use MessageDeliveryStatus
enum to determine the current delivery status, for example:
import { MessageDeliveryStatus } from 'stream-chat-react';
import {
DoubleCheckMarkIcon,
SingleCheckMarkIcon,
} from '../icons';
type MessageDeliveryStatusIndicator = {
messageDeliveryStatus: MessageDeliveryStatus;
}
export const MessageDeliveryStatusIndicator = ({ messageDeliveryStatus }: MessageDeliveryStatusIndicator) => {
// the last message is not an own message in the channel
if (!messageDeliveryStatus) return null;
return (
<div>
{messageDeliveryStatus === MessageDeliveryStatus.DELIVERED && <SingleCheckMarkIcon /> }
{messageDeliveryStatus === MessageDeliveryStatus.READ && <DoubleCheckMarkIcon /> }
</div>
);
};
onSelect
Custom handler invoked when the ChannelPreview
is clicked. The SDK uses ChannelPreview
to display items of channel search results. There, behind the scenes, the new active channel is set.
Type |
---|
(event: React.MouseEvent) => void |
Preview
The UI component to use for display.
Type | Default |
---|---|
component | ChannelPreviewMessenger |
setActiveChannel
The setter function for a selected channel
.
Type |
---|
ChatContextValue['setActiveChannel'] |
unread
The number of unread Messages.
Type |
---|
number |
watchers
The object containing watcher parameters. See the Pagination documentation for a list of available fields for sort.
Type |
---|
{ limit?: number; offset?: number } |