Skip to main content

Support reactions in your app built with XMTP

Status Status

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.

Open for feedback

You're welcome to provide feedback by commenting on the Proposal for emoji reactions content type XIP idea.

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.

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());

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

To handle unsupported content types, refer to the fallback section.

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.

Notifications and reactions

Reactions have shouldPush set to false, which means that reactions do not trigger push notifications as long as the notification server respects this flag.

Was the information on this page helpful?
powered by XMTP