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 on this implementation by commenting on the Proposal for emoji reactions content type.

Reactions with React

To learn how to use the reaction content type with the React SDK, see Handle content types with the React SDK.

Install the package

JavaScript

npm i @xmtp/content-type-reaction

Import and register

JavaScript

import {
  ContentTypeReaction,
  ReactionCodec,
} from "@xmtp/content-type-reaction";
// Create the XMTP client
const xmtp = await Client.create(signer, { env: "dev" });
// Register the codecs, AttachmentCodec is for handling local attachments under 1MB
xmtp.registerCodec(new 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",
};

Send a reaction

Now that you have a reaction, you can send it:

JavaScript

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.