Reactions

Reacting to messages

One of the first things many people want to know is how to react with emojis, both custom and "regular" (unicode). There are different routes you need to take for each of those, so let's take a look at both.

Here's the base code we'll be using:

const Discord = require('discord.js');
const client = new Discord.Client();

client.once('ready', () => {
	console.log('Ready!');
});

client.on('message', message => {
	// ...
});

client.login('your-token-goes-here');

Unicode emojis

To react with a unicode emoji, you will need the actual unicode character of the emoji. There are many ways to get a unicode character of an emoji, but the easiest way would be through Discord itself. If you send a message with a unicode emoji (such as :smile:, for example) and put a \ before it, it will "escape" the emoji and will display the unicode character instead of the normal emoji image.

Escaped unicode emoji

To actually react with an emoji, you need to use the message.react() method. Once you have the emoji character, all you need to do is copy & paste it as a string inside the .react() method!

if (message.content === '!react') {
	message.react('😄');
}

Unicode emoji reaction

Custom emojis

For custom emojis, there are actually multiple ways of reacting. Like unicode emojis, custom emojis can also be escaped. However, when you escape a custom emoji, the result will be different.

Escaped custom emoji

This format is essentially the name of the emoji, followed by its ID. Copy & paste the ID into the .react() method as a string.

if (message.content === '!react-custom') {
	message.react('396548322053062656');
}

Custom emoji reaction via ID

Great! This route may not always be available to you, though. Sometimes you'll need to react with an emoji programmatically. To do so, you'll need to retrieve the emoji object.

Two of the easiest ways you can retrieve an emoji would be:

  • Use .find() on a Collection of Emojis.
  • Use .get() on the client.emojis Collection.

TIP

It is possible for two or more emojis to have the same name, and using .find() will only return the first entry it finds. As such, this can cause unexpected results.

Using .find(), your code would look something like this:

if (message.content === '!react-custom') {
	const emoji = message.guild.emojis.find(emoji => emoji.name === 'ayy');
	message.react(emoji);
}

Using .get(), your code would look something like this:

if (message.content === '!react-custom') {
	const emoji = client.emojis.get(config.emojiID);
	message.react(emoji);
}

Of course, if you already have the emoji ID, you should just put that directly inside the .react() method. But if you want to do other things with the emoji data later on (e.g. display the name or image URL), it's best to retrieve the full emoji object.

Reacting in order

If you just put one message.react() under another, it won't always react in order as is. This is because .react() is a Promise, and as such, an asynchronous operation.

if (message.content === '!fruits') {
	message.react('🍎');
	message.react('🍊');
	message.react('🍇');
}

Reaction race condition

As you can see, if you leave it like that, it won't display as you really want it to. It was able to react correctly on the first try, but reacts in a different order each time after that.

Luckily, there are two easy solutions to this. The first would be to to chain .then()s in the order you want it to display.

client.on('message', message => {
	if (message.content === '!fruits') {
		message.react('🍎')
			.then(() => message.react('🍊'))
			.then(() => message.react('🍇'))
			.catch(() => console.error('One of the emojis failed to react.'));
	}
});

The other would be to use the async/await keywords.

// notice the `async` keyword
client.on('message', async message => {
	if (message.content === '!fruits') {
		try {
			await message.react('🍎');
			await message.react('🍊');
			await message.react('🍇');
		} catch (error) {
			console.error('One of the emojis failed to react.');
		}
	}
});

If you try again with either of the codeblocks above, you'll get the result you originally wanted!

Emojis reacting in correct order

TIP

If you aren't familiar with Promises or async/await, you can read more about them on MDN or our guide page on async/await!

Handling multiple reactions if the order doesn't matter

However, if you don't mind the order the emojis react in, you can take advantage of Promise.all(), like so:

if (message.content === '!fruits') {
	Promise.all([
		message.react('🍎'),
		message.react('🍊'),
		message.react('🍇'),
	])
		.catch(() => console.error('One of the emojis failed to react.'));
}

The benefit of this small optimization is that you can use .then() to handle when all of the Promises have resolved, or .catch() when one of them has failed. You can also await it since it returns a Promise itself.

Awaiting reactions

A common use case for reactions in commands is having a user confirm or deny an action, or creating a poll system. Luckily, we actually already have a guide page that covers this! Check out that page if you want a more in-depth explanation. Otherwise, here's a basic example for reference:

message.react('👍').then(() => message.react('👎'));

const filter = (reaction, user) => {
	return ['👍', '👎'].includes(reaction.emoji.name) && user.id === message.author.id;
};

message.awaitReactions(filter, { max: 1, time: 60000, errors: ['time'] })
	.then(collected => {
		const reaction = collected.first();

		if (reaction.emoji.name === '👍') {
			message.reply('you reacted with a thumbs up.');
		} else {
			message.reply('you reacted with a thumbs down.');
		}
	})
	.catch(collected => {
		message.reply('you reacted with neither a thumbs up, nor a thumbs down.');
	});

Listening for reactions on old messages

Discord.js v11 does not have the ability to emit events if the respective structures it needs to emit with are incomplete and does not auto-fetch the missing information. This behaviour has been changed in version 12 of the library. It introduces partial structures which enable us to emit incomplete structures and complete them with a single fetch call. This feature is not available on version 11.x if you want to listen for reactions on old messages please use version 12 of the library.

Messages sent before your bot started are uncached, unless you fetch them first. By default the library does not emit client events if the data received and cached is not sufficient to build fully functional objects. Since version 12 you can change this behaviour by activating partials. For a full explanation of partials see this page.

Make sure you enable partial structures for both MESSAGE and CHANNEL when instantiating your client, if you want reaction events on uncached messages for both server and direct message channels. If you do not want to support direct message channels you can only enable MESSAGE.

const Discord = require('discord.js');
const client = new Discord.Client({ partials: ['MESSAGE', 'CHANNEL'] });
client.on('messageReactionAdd', async (reaction, user) => {
	// When we receive a reaction we check if the message is partial or not
	if (reaction.message.partial) {
		// If the message was removed the fetching might result in an API error, which we need to handle
		try {
			await reaction.message.fetch();
		} catch (error) {
			console.log('Something went wrong when fetching the message: ', error);
		}
	}
	// Now the message has been cached and is fully available
	console.log(`${reaction.message.author}'s message "${reaction.message.content}" gained a reaction!`);
});

WARNING

Partial structures are enabled globally. You can not only make them work for a certain event or cache and you very likely need to adapt other parts of your code that are accessing data from the relevant caches. All caches holding the respective structure type might return partials as well!

Resulting code

If you want to compare your code to the code we've constructed so far, you can review it over on the GitHub repository here .