# AttachmentContext

> **Info:** This is release candidate documentation for **Stream Chat React SDK v15**. For the latest stable version, see the [latest version (v14)](https://getstream.io/chat/docs/sdk/react/).

`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`](https://getstream.io/chat/docs/sdk/react/v15/component-reference/message/attachments/) provides it from its props, and the components it renders read it. [Attachments and uploads](https://getstream.io/chat/docs/sdk/react/v15/features/rich-content/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:

```tsx
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:

```tsx
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](https://getstream.io/chat/docs/sdk/react/v15/component-reference/channel/componentcontext/).

---

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v15/component-reference/channel/attachmentcontext/](https://getstream.io/chat/docs/sdk/react/v15/component-reference/channel/attachmentcontext/).