Skip to main content

Giphy Preview

This example demonstrates how to build a custom component to override the default GiphyPreviewMessage component that is rendered optionally in the VirtualizedMessageList.

separateGiphyPreview Prop#

When the separateGiphyPreview prop on the list is set to true, the Giphy preview is rendered in a separate component above the MessageInput rather than inline with the other messages in the list. This separate component makes it so the preview doesn't scroll away in the large channel.

<VirtualizedMessageList separateGiphyPreview />

Implementation#

Our custom preview component will render an Attachment component with a custom AttachmentActions UI component, which handles the onClick functionality. This functionality is handled with the handleAction method via the Message component's useActionHandler hook.

const CustomAttachmentActions: React.FC<AttachmentActionsProps> = (props) => {
const { actionHandler, actions } = props;

const handleClick = async (
event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
value?: string,
name?: string,
) => {
try {
if (actionHandler) await actionHandler(name, value, event);
} catch (err) {
console.log(err);
}
};

return (
<>
{actions.map((action) => (
<button onClick={(event) => handleClick(event, action.value, action.name)}>
{action.value}
</button>
))}
</>
);
};

const CustomGiphyPreview: React.FC<GiphyPreviewMessageProps> = (props) => {
const { message } = props;

const handleAction = useActionHandler(message);

if (!message.attachments) return null;

return (
<Attachment
actionHandler={handleAction}
AttachmentActions={CustomAttachmentActions}
attachments={message.attachments}
/>
);
};

<Chat client={chatClient}>
<Channel GiphyPreviewMessage={CustomGiphyPreview}>
<ChannelHeader />
<VirtualizedMessageList separateGiphyPreview />
<MessageInput />
</Channel>
</Chat>;

The Result#

Custom GiphyPreview component for Chat

Did you find this page helpful?