Reaction Content Type

A reaction is a quick and often emoji-based way to respond to a message. Reactions are usually limited to a predefined set of emojis or symbols provided by the messaging app.

Open for feedback

You are welcome to provide feedback by commenting on the Reaction Content Type XIP Proposal

Configure content type

In some SDK's the ReactionCodec is already included in the SDK. If not, you can install the package using the following command:

JavaScript

In the javascript SDK you need to import this package first.

npm i @xmtp/content-type-reaction

After importing the package you can register the codec.

import {
  ContentTypeReaction,
  ReactionCodec,
} from "@xmtp/content-type-reaction";
// Create the XMTP client
const xmtp = await Client.create(signer, { env: "dev" });
xmtp.registerCodec(new ReactionCodec());

React

The React SDK supports all current standards-track content types, but only text messages are enabled out of the box. Adding support for other standards-track content types requires a bit of configuration.

import {
  XMTPProvider,
  reactionContentTypeConfig,
} from "@xmtp/react-sdk";

const contentTypeConfigs = [
  reactionContentTypeConfig,
];

createRoot(document.getElementById("root") as HTMLElement).render(
  <StrictMode>
    <XMTPProvider contentTypeConfigs={contentTypeConfigs}>
      <App />
    </XMTPProvider>
  </StrictMode>,
);

Swift

Client.register(ReactionCodec());

Kotlin

import org.xmtp.android.library.codecs.ReactionCodec

Client.register(codec = ReactionCodec())

Create a reaction

With XMTP, reactions are represented as objects with the following keys:

• reference: The message ID for the message that is being reacted to

• action: The action of the reaction (added or removed)

• content: A string representation of a reaction (e.g. smile) to be interpreted by clients

JavaScript

const reaction = {
  reference: someMessageID,
  action: "added",
  content: "smile",
};

await conversation.send(reaction, {
  contentType: ContentTypeReaction,
});

Receive a reaction

Now that you can send a reaction, you need a way to receive a reaction. For example:

JavaScript

if (message.contentType.sameAs(ContentTypeReaction)) {
  // We've got a reaction.
  const reaction: Reaction = message.content;
}

Display the reaction

Generally, reactions should be interpreted as emoji. So, "smile" would translate to 😄 in UI clients. That being said, how you ultimately choose to render a reaction in your app is up to you.