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) {      console.log(err);    }  };
  return (    <>      { => (        <button onClick={(event) => handleClick(event, action.value,}>          {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?