Support reactions in your app built with XMTP

Use the reaction content type to support reactions in your app. 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.

Use a local database for performance

Use a local database to store reactions. This enables your app to performantly display a reaction with its referenced message when rendering message lists.

Install the package

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

npm i @xmtp/content-type-reaction

Configure the content type

After importing the package, you can register the codec.

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

Send a reaction

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

• reference: ID of the message being reacted to

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

• content: String representation of the reaction (smile, for example) to be interpreted by clients

• schema: Schema of the reaction (Unicode, shortcode, or custom)

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:

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