Info:
This is release candidate documentation for Stream Chat React SDK v15. For the latest stable version, see the latest version (v14).

AttachmentContext

AttachmentContext holds four settings that decide how attachments render: the Giphy rendition, how images and videos are sized, and whether videos get a thumbnail. Attachment provides it from its props, and the components it renders read it. Attachments and uploads covers the feature.

Values

Value Type Default Description
giphyVersion GiphyVersions "fixed_height" The Giphy rendition that Giphy attachments and link-preview cards show, such as "original" or "fixed_width".
imageAttachmentSizeHandler ImageAttachmentSizeHandler the SDK's (attachment, element) => ({ url }): the URL to load for an image, given the element it renders in. The SDK's handler adds resize parameters to the URL: the element's CSS size, doubled to stay sharp on high-density screens.
shouldGenerateVideoThumbnail boolean true Whether a video shows a thumbnail with a play button before it plays. With false, the player renders at once.
videoAttachmentSizeHandler VideoAttachmentSizeHandler the SDK's (attachment, element, shouldGenerateVideoThumbnail) => ({ url, thumbUrl }): the video URL and the thumbnail URL. The SDK's handler keeps the video URL as it is, and sizes the thumbnail the same way as images when thumbnails are on.

defaultAttachmentContextValue holds the four defaults, so a handler of your own can fall back to the SDK's.

Setting them

Set them as props of Attachment. To change them everywhere, register a wrapper as the Attachment override:

import type { PropsWithChildren } from "react";
import { Attachment, WithComponents } from "stream-chat-react";
import type { AttachmentProps } from "stream-chat-react";

const AppAttachment = (props: AttachmentProps) => (
  <Attachment
    {...props}
    giphyVersion="original"
    shouldGenerateVideoThumbnail={false}
  />
);

const overrides = { Attachment: AppAttachment };

export const AttachmentSettings = ({ children }: PropsWithChildren) => (
  <WithComponents overrides={overrides}>{children}</WithComponents>
);

A value you don't pass keeps its default. The default MessageUI reads the Attachment key, so the wrapper applies to the attachments of every message.

A quoted message, in a message or in the composer, reads giphyVersion too. It renders outside any Attachment, so Attachment's props don't reach it, and it gets the default. AttachmentContextProvider is exported and sets the context directly; one around the message list or the composer reaches their quoted messages. It takes the whole value: pass all four fields, starting from defaultAttachmentContextValue.

Reading them

A component that Attachment renders reads the values with useAttachmentContext(), as the SDK's own do. This Giphy component, passed as Attachment's Giphy prop, shows the configured rendition as a plain image:

import type { Attachment as StreamAttachment } from "stream-chat";
import { Attachment, useAttachmentContext } from "stream-chat-react";
import type { AttachmentProps } from "stream-chat-react";

const PlainGiphy = ({ attachment }: { attachment: StreamAttachment }) => {
  const { giphyVersion } = useAttachmentContext();
  const rendition = attachment.giphy?.[giphyVersion];

  return (
    <img
      alt={attachment.title ?? "GIF"}
      src={rendition?.url ?? attachment.thumb_url}
    />
  );
};

export const AttachmentWithPlainGiphy = (props: AttachmentProps) => (
  <Attachment {...props} Giphy={PlainGiphy} />
);

Outside an Attachment, useAttachmentContext() returns the defaults. It never throws.

Related hooks

  • useAttachmentContext() returns the values above.
  • useComponentContext() returns the Attachment override, if one is set. See ComponentContext.