# MessageComposer Middleware

## Message Composer Middleware

MessageComposer middleware gives full control over data processing in different composition scenarios.

## Best Practices

- Keep middleware order intentional to avoid unexpected transformations.
- Use unique IDs for middleware to prevent duplicate registrations.
- Scope middleware by context (channel/thread/edit) when needed.
- Keep middleware pure where possible to simplify debugging.
- Test edge cases (mentions, emoji, attachments) after middleware changes.

<partial id="shared/chat/js/message-composer/_middleware-pattern"></partial>

## Message Composer Middleware Overview

<partial id="shared/chat/js/message-composer/_middleware-pre-built-executors-overview"></partial>

## Text Composition Middleware

<partial id="shared/chat/js/message-composer/_middleware-text-composer"></partial>

### Emoji Suggestions Middleware

Emoji suggestions are handled by `TextComposer` middleware. It’s disabled by default. To enable it, import it from `stream-chat-react/emojis` and register it:

```tsx
import { createTextComposerEmojiMiddleware } from "stream-chat-react/emojis";
import type { TextComposerMiddleware } from "stream-chat";

import { init, SearchIndex } from "emoji-mart";
import data from "@emoji-mart/data";

init({ data });

const Component = () => {
  useEffect(() => {
    if (!chatClient) return;

    chatClient.setMessageComposerSetupFunction(({ composer }) => {
      const emojiMiddleware = createTextComposerEmojiMiddleware(
        SearchIndex,
      ) as TextComposerMiddleware;

      composer.textComposer.middlewareExecutor.insert({
        middleware: [emojiMiddleware],
        position: { before: "stream-io/text-composer/mentions-middleware" },
        unique: true,
      });

      return () => {
        composer.textComposer.middlewareExecutor.remove(emojiMiddleware.id);
      };
    });
  }, [chatClient]);
};
```

You can customize the middleware in a few ways:

**Change Trigger or Minimum Trigger Characters**

```ts
textComposer.middlewareExecutor.use([
  createTextComposerEmojiMiddleware(SearchIndex, {
    minChars: 3,
    trigger: "__",
  }),
]);
```

**Provide Custom Search Source**

If you need custom suggestions, provide a custom search source:

```ts
const searchSource = new CustomSearchSource();

textComposer.middlewareExecutor.use([
  createTextComposerEmojiMiddleware(searchSource),
]);
```

## Attachment Upload Middleware

<partial id="shared/chat/js/message-composer/_middleware-attachment-upload"></partial>

## Poll Composition Middleware

<partial id="shared/chat/js/message-composer/_middleware-poll-composer"></partial>

## Message Composition Middleware

<partial id="shared/chat/js/message-composer/_middleware-message-composer"></partial>


---

This page was last updated at 2026-04-13T07:26:58.495Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v14/components/message-composer/message-composer-middleware/](https://getstream.io/chat/docs/sdk/react/v14/components/message-composer/message-composer-middleware/).