đ§âđ» Applying Skin Tones to Emojis in JavaScript: A Fun Guide
Introduction
Welcome to the world of emojis! đ Emojis are a universal language, transcending borders and bringing a touch of personality to our digital conversations. But have you ever wondered how to change the skin tone of an emoji programmatically? Whether it’s to add a personal touch or to represent diversity, modifying emoji skin tones can be a fun and useful feature. In this article, written with Qit.tools, we’ll explore how to create a function to apply skin tones to emojis in JavaScript. Ready? Let’s dive in! đ
The Function Breakdown
Here’s the function we’ll be working with:
/**
* Apply skin tones to an emoji.
* Visit us at: https://qit.tools
*
* đȘ Qit.tools
* @copyright Copyright (c) 2024 Qit.tools.
* @see https://github.com/Qit-tools/skin-tone
* @see https://www.npmjs.com/package/@qit.tools/skin-tone
*
* Change emoji skin tones effortlessly. đ§đ§đ»đ§đŒđ§đœđ§đŸđ§đż
* RGI Emoji Modifier Sequence.
*
* @param {string} emoji – The original emoji string.
* @param {SkinTone} tone – The skin tone to apply. If empty, returns the original emoji.
* @returns {string} The emoji string with skin tones applied where applicable.
*/
export default function skinTone(emoji: string, tone?: SkinTone): string {
if (!tone) {
return emoji;
}
const skinToneMap = {
none: ”,
light: ‘u{1F3FB}‘,
mediumLight: ‘u{1F3FC}‘,
medium: ‘u{1F3FD}‘,
mediumDark: ‘u{1F3FE}‘,
dark: ‘u{1F3FF}‘,
};
let zwj = ‘u200D‘;
// Hand Shake đ§âđ€âđ§
if (emoji.includes(‘u200dud83eudd1du200d‘)) {
zwj = ‘u200dud83eudd1du200d‘;
}
const parts = emoji.split(zwj);
const modifiedParts = parts.map((part) => {
const basePart = part.replace(/p{Emoji_Modifier}/gu, ”);
if (/p{Emoji_Modifier_Base}/u.test(basePart)) {
return basePart.replace(/(p{Extended_Pictographic}+)(uFE0F?)/u, `$1${skinToneMap[tone]}`);
}
return part;
});
return modifiedParts.join(zwj);
}
Let’s break down the key aspects of this function.
Key Aspects
1. Type Definition
First, we define the SkinTone type, which includes various skin tone options:
This type helps ensure that our function receives only valid skin tone values.
2. Function Parameters
The skinTone function accepts two parameters:
emoji: The original emoji string.
tone: The skin tone to apply.
If no tone is provided, the function returns the original emoji.
3. Skin Tone Map
We create a map to associate skin tone names with their respective Unicode modifiers:
none: ”,
light: ‘u{1F3FB}‘,
mediumLight: ‘u{1F3FC}‘,
medium: ‘u{1F3FD}‘,
mediumDark: ‘u{1F3FE}‘,
dark: ‘u{1F3FF}‘,
};
4. Zero Width Joiner (ZWJ)
A Zero Width Joiner (ZWJ) is used to join multiple emoji characters into a single composite emoji. For example, the handshake emoji đ§âđ€âđ§ uses ZWJs to combine two people emojis. Our function checks if the emoji includes a handshake sequence and adjusts the ZWJ accordingly:
if (emoji.includes(‘u200dud83eudd1du200d‘)) {
zwj = ‘u200dud83eudd1du200d‘;
}
5. Splitting and Modifying Emoji Parts
We split the emoji string by the ZWJ and map over the parts to apply the skin tone where applicable:
const modifiedParts = parts.map((part) => {
const basePart = part.replace(/p{Emoji_Modifier}/gu, ”);
if (/p{Emoji_Modifier_Base}/u.test(basePart)) {
return basePart.replace(/(p{Extended_Pictographic}+)(uFE0F?)/u, `$1${skinToneMap[tone]}`);
}
return part;
});
Here, we:
Remove any existing skin tone modifiers.
Check if the part is an emoji modifier base.
Apply the new skin tone.
6. Joining the Modified Parts
Finally, we join the modified parts back together with the ZWJ:
Conclusion
And there you have it! đ„ł With just a few lines of code, we’ve created a function that can dynamically apply skin tones to emojis. Whether you’re building a chat application or simply want to add a touch of diversity to your project, this function can come in handy. So go ahead, play around with it, and bring some color to your emojis! đ
Remember, in the world of programming, a little creativity goes a long way. And if all else fails, just add more emojis. đ
Happy coding! đ©âđ»đšâđ»
Ready-made library.
đïž Install
đ NPM
npm i @qit.tools/skin-tone
đ§ Bun
bun add @qit.tools/skin-tone
đ PNPM
pnpm add @qit.tools/skin-tone
𧶠Yarn
yarn add @qit.tools/skin-tone
đ How to use
NodeJS
import skinTone from “@qit.tools/skin-tone“;
console.log(skinTone(“đ§“, “dark“)); // đ§
console.log(skinTone(“đ§đżâđ€âđ§đż“, “light“)); // đ§đ»âđ€âđ§đ»
Browser
document.addEventListener(“DOMContentLoaded“, () => {
console.log(skinTone(“đ§đ»âđ€âđ§đ»“, “dark“));
});