---
id: giphy_preview
title: Giphy Preview
---

import GiphyPreview from '../../assets/GiphyPreview.png';

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.

```jsx
<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.

```jsx
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

<img src={GiphyPreview} alt='Custom GiphyPreview component for Chat' width='700' />
