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 />


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) {

return (
{ => (
<button onClick={(event) => handleClick(event, action.value,}>

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

const handleAction = useActionHandler(message);

if (!message.attachments) return null;

return (

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

The Result#

Custom GiphyPreview component for Chat

Did you find this page helpful?