npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@xmtp/content-type-reaction

v2.0.0

Published

An XMTP content type to support reactions to messages

Downloads

8,137

Readme

Reaction content type

Status Status

This package provides an XMTP content type to support reactions to messages.

Open for feedback
You are welcome to provide feedback on this implementation by commenting on the Proposal for emoji reactions content type.

What’s a reaction?

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.

Why reactions?

Providing message reactions in your app enables users to easily express a general sentiment or emotion toward a message. It also provides a handy way to acknowledge a message or show a particular emotional reaction without engaging in a detailed response.

Install the package

# npm
npm i @xmtp/content-type-reaction

# yarn
yarn add @xmtp/content-type-reaction

# pnpm
pnpm i @xmtp/content-type-reaction

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
const reaction: Reaction = {
  reference: someMessageID,
  action: "added",
  content: "smile",
};

Send a reaction

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

await conversation.messages.send(reaction, {
  contentType: ContentTypeReaction,
});

Note
contentFallback text is provided by the codec and gives clients that don't support a content type the option to display some useful context. For cases where clients do support the content type, they can use the content fallback as alt text for accessibility purposes.

Receive a reaction

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

// Assume `loadLastMessage` is a thing you have
const message: DecodedMessage = await loadLastMessage();

if (!message.contentType.sameAs(ContentTypeReaction)) {
  // We do not have a reaction. A topic for another blog post.
  return;
}

// 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 :smile: in UI clients. That being said, how you ultimately choose to render a reaction in your app is up to you.

Developing

Run yarn dev to build the content type and watch for changes, which will trigger a rebuild.

Testing

Before running unit tests, start the required Docker container at the root of this repository. For more info, see Running tests.

Useful commands

  • yarn build: Builds the content type
  • yarn clean: Removes node_modules, dist, and .turbo folders
  • yarn dev: Builds the content type and watches for changes, which will trigger a rebuild
  • yarn lint: Runs ESLint
  • yarn test:setup: Starts a necessary docker container for testing
  • yarn test:teardown: Stops docker container for testing
  • yarn test: Runs all unit tests
  • yarn typecheck: Runs tsc