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

npm i @xmtp/content-type-reaction

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

Configure the content type

After importing the package, you can register the codec.

const client = await Client.create(signer, {
  env: "production",
  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)

// Assuming you have a conversation object and the ID of the message you're reacting to
const reactionContent = {
  reaction: {
    reference: messageId, // ID of the message you're reacting to
    action: "added", // Action can be 'added' or 'removed'
    schema: "unicode", // Schema can be 'unicode', 'shortcode', or 'custom'
    content: "👍", // Content of the reaction
  },
};
 
await conversation.send(reactionContent);

Receive a reaction

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

if (message.contentTypeId === "xmtp.org/reaction:1.0") {
  const reaction = message.content();
  return reaction;
  //reaction.reference = id of the message being reacted to,
  //reaction.action = 'added',
  //reaction.schema =  'unicode',
  //reaction.content = '💖',
}