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 will enable your app to performantly display a reaction with its referenced message when rendering message lists.

To learn more about using a local database, see Use local-first architecture.

Configure the content type

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

In the JavaScript SDK, you need to import this package first.

Bash

npm i @xmtp/content-type-reaction

After importing the package, you can register the codec.

JavaScript

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

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;
}